Props in React JS

3 min readApr 8, 2023

Props යනු properties කියන අර්ථය ලබා දීමට භාවිතා කරන කෙටි යෙදුමකි. React JS වලදී props භාවිතා කරන්නේ parent component එකේ සිට child component එකට data pass කිරීමට object එකක් ලෙසයි.

Parent component එකේදී HTML attribute එකක් ලෙස props භාවිතා කර data pass කරන අතර, child component එකේදී class object එකක් විදියට හෝ function argument එකක් ලෙස props ලබා ගනු ලබනවා.

//in the parent component as HTML attribute
<div>
  <ClassBase msg="Class Base" />
  <FuncBase msg="Function Base" />
</div>

//at class-base component as an object of the class
export default class ClassBase extends Component {
  render() {
    console.log("Class props", this.props); //Class props {msg: 'Class Base'}
    return <div><p>{this.props.msg}</p></div>;
  }
}

// at function component as an funaction argument
export default function FuncBase(props) {
  console.log('Function props', props); //Function props {msg: 'Function Base'}
  return (
    <div><p>{props.msg}</p></div>
  )
}

ඊළගට අපි අවධානය යොමු කල යුතු වැදගත්ම කාරණය තමයි මේ props වල තියෙන Read-only කියන ගුණය. ඒ කියන්නේ අපිට child component එකේදී props වල values වෙනස් කරන්න බැහැ කියන එක. එහෙම කරන්න උත්සහ කලොත් අපිට Error එකකට මුහුණ දෙන්න සිද්ධ වෙනවා.

export default class ClassBase extends Component {
  render() {
    console.log("Class props", this.props); //Class props {msg: 'Class Base'}
    this.props.msg='New prop value'//Cannot assign to read only property 'msg' of object
    return <div><p>{this.props.msg}</p></div>;
  }
}

export default function FuncBase(props) {
    console.log('Function props', props); //Function props {msg: 'Function Base'}
    props.msg='New prop value' //Cannot assign to read only property 'msg' of object
  return (
    <div><p>{props.msg}</p></div>
  )
}

Setting default values to props

අපිට අවශ්‍ය වුනොත් child component එකේදී props වලට default values දෙන්නත් පුළුවන්. හැබැයි මෙහිදී අවධානය යොමු කල යුතු කාරණයක් තියෙනවා. ඒ තමයි, අපිට මේ විදිහට default value එකක් assign කරන්න පුළුවන් වෙන්නේ parent component එකෙන් අදාළ props හිස්ව හෝ එවලා නැත්නම් පමණයි.

//at parent component
<div>
    <ClassBase />
    <FuncBase />
  </div>

//in the class-base child component
export default class ClassBase extends Component {
  static defaultProps = {
    msg: "Default Prop",
  };
  render() {
    console.log("Class props", this.props); //Class props {msg: 'Default Prop'}
    return (
      <div><p>{this.props.msg}</p></div>
    );
  }
}

//in the functional child component
export default function FuncBase(props) {
  console.log("Function props", props); //Function props {msg: 'Default Prop'}
  return (
    <div><p>{props.msg}</p></div>
  );
}
FuncBase.defaultProps = {
  msg: "Default Prop",
};
//or
export default function FuncBase({name="Lakshman"}) {
  console.log("Name-", name);// Name- Lakshman
  console.log("Function props", props); //Function props {msg: 'Default Prop'}
  return (
    <div><p>{props.msg}</p></div>
  );
}

Validating props

ඒවගේම අපිට පුළුවන් child component එකේදී props validate කරන්නත්. ඒ සදහා අපිටchild component එකට PropTypes import කර ගන්න වෙනවා (import PropTypes from ‘prop-types’;). Validation එක fail නම් අපිට warning එකක් ලැබෙනවා.

//In the class-base component
import React, { Component } from "react";
import PropTypes from 'prop-types';

export default class ClassBase extends Component {
  static propTypes = {
    msg: PropTypes.number.isRequired,
    //Warning: Failed prop type: Invalid prop `msg` 
    //of type `string` supplied to `ClassBase`, expected `number`.
  };
  render() {
    console.log("Class props", this.props); //Class props {msg: 'Default Prop'}
    return (
      <div><p>{this.props.msg}</p></div>
    );
  }
}

// In the functional component
import React from "react";
import PropTypes from 'prop-types';

export default function FuncBase(props) {
  console.log("Function props", props);
  return (
    <div><p>{props.msg}</p></div>
  );
}
FuncBase.propTypes = {
    msg: PropTypes.number.isRequired,
    //Warning: Failed prop type: Invalid prop `msg` 
    //of type `string` supplied to `FuncBase`, expected `number`.
};

අද වන විට බොහෝ විට React JS projects වලදී class-based components මුණ නොගැසෙන නිසා සහ ES6 සමග object de-structuring හදුන්වා දීමත් සමග මෙම “Props” වචනය මුණ නොගැසෙන්න පුළුවන්. අපි බලමු කොහොමද functional components වල දී Props සදහා de-structuring භාවිතා කරන්නේ කියලා.

export default function FuncBase({msg:message}) {
  console.log("Function props", message);// Function props Function Base
  return (
    <div><p>{message}</p></div>
  );
}

මෙහිදී අපට parent component එකෙන් ලැබෙන props object එක අපි child component function එකේදී de-structure කරලා ම variable වලට ලබා ගන්නවා. JavaScript de-structuring ගැන අපි කලින් article එකක කතා කරලා තියෙනවා.

මේ පිලිබදව වැඩි තොරතුරු පහත මුලාශ්‍ර වලින් හොයාගන්න පුළුවන්.

ඉහත කරුණු අතර, ඔබට එකග විය නොහැකි යමක් හෝ අලුතින් එක්විය යුතු දෙයක් ඇත්නම් කරුණාකර Response (comment) එකක් මගින් දැනුවත් කරන්න. වැරදි/අඩුපාඩු සහිත තොරතුරක් සමාජ ගතවීම වැලක්වීමට ඔබටද එමගින් දායක විය හැකියි.

Props in React JS

Setting default values to props

Validating props

Written by Lakshman Karunasena