Understanding props in React

Props is used in React to data exchange between components; from class component to stateless functional component or even from class component to another class component or from stateless functional component to another stateless functional component.

Props stands for properties.

First lets recap the two types of components in React.

• Class component or stateless component and
• Functional component or stateless functional component

Class component

class HelloWorld extends React.Component{
     constructor(props){
       super(props);
     }
     render(){
       return(
         <div><h1>Hello World!</h1></div>
       )
     };
};

Functional component

function HelloWorld(){
   return <div>Hello World!</div>
}

ES6 syntax: arrow function

const HelloWorld = () => {
  return (
     <div>Hello World!</div>
  )
}

Props in class component to stateless functional component

How we can pass argument (props) from parent class component to child functional component?

Lets define class component and a child functional component and then pass props.

class Calendar extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div><CurrentDate date = {Date()} /></div>
    )
  };
};

const CurrentDate = (props)=>{
   return (
      <p>Current date is: {props.date} </p>
   )
}

Here we are passing Date object to child functional component(CurrentDate) and in CurrentDate we are using props to access Date object using props.date.

Props in stateless functional component to another stateless functional component

const Calendar = () => {
    return(
      <div><CurrentDate date = {Date()} /></div>
    )
}
const CurrentDate = (props) => {
    return(
      <p>Current date is: = {props.date}</p>
    )
}

Note: Functional component don’t use render method. Only return method allowed.

Props in class component to another class component

We use special keyword this.

class Calendar extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div><CurrentDate date = {Date()} /></div>
    )
  };
};
class CurrentDate extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <p>Current date is: {this.props.date}</p>
    )
  };
};

How to pass array as props

Same way but we use join method to display our array value.

class ToDo extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div><List task = {['Walking', 'Swimming']} /></div>
    )
  };
};

const List = (props) => {
   return (
     <p>{ props.task.join(', ') }</p>
   )
}

// We can write in single line:

const List = (props) = <p>{ props.task.join(', ') }</p>

Default props and overriding default props

Sometimes we can have a case where we must first define the default props, if no argument pass then this default props is used.

For example, a shopping cart. Cart starts with item 0 unless its fills out. Lets define a cart component and then create default props.

const ShoppingCart = (props) => {
   return (
      <div>
         <h1>Shopping cart</h1>
         <p>Current item: {props.items}</p>
      </div>
   )
};

// Defining a default cart value
ShoppingCart.defaultProps = {items: 0}

How to pass props or overriding this default props value? Quite simple. Calling this component from parent component.

{/* ... */}

<ShoppingCart items = {10} />

{/* ... */}

Here we pass 10 and it overrides the default cart value 0. If we don’t pass value then 0 will be used. For example:

{/* ... */}

<ShoppingCart />

{/* ... */}

Props Type

React provides useful type-checking features to verify that components receive props of the correct type. For example, your application makes an API call to retrieve data that you expect to be in an array, which is then passed to a component as a prop. You can set propTypes on your component to require the data to be of type array. This will throw a useful warning when the data is of any other type.

It’s considered a best practice to set propTypes when you know the type of a prop ahead of time. You can define a propTypes property for a component in the same way you defined defaultProps. Doing this will check that props of a given key are present with a given type.

Cart value is 0, so we expect an integer type value as props.

ShoppingCart.propTypes = {
  items: PropTypes.number.isRequired
};

To set a propTypes, the syntax to be followed is

itemName.propTypes = {   
   props: PropTypes.dataType.isRequired 
};