Understanding React Props

#react #javascript #tutorial #beginners

React props allow us pass attributes to from one component to another component. props stand for properties. We can create two identical components are pass them different props. That way, we create two instances from one component.

function Child() {
   return <p> I am a boy</p> 
}


// import child

function Parent() {
  return (
  <div>
      <Child />
      <Child />
  </div>
   )
}

// translates to

function Parent() {
  return (
  <div>
       <p> I am a boy </p>
       <p> I am a boy </p>
  </div>
   )
}

Create variations of the same component using props

We can create two different versions of Child by simply assigning different props to the two children, thereby creating two instances.

function Child(props) {
   return <h1> I am a {props.gender} </h1> 
}

Now we can do this


// import child

function Parent() {
  return (
   <div>
      <Child gender="boy"/>
      <Child gender="girl"/>
   </div>
   )
}

// translates to

function Parent() {
  return (
  <div>
     <h1> I am a boy </h1>
     <h1> I am a girl </h1>
  </div>
   )
}

The child functional component must always use the 'props' parameter. Without passing this parameter, you can access any props from a parent.

Using props with class components

props can also be used in class-based React components.

import {Component} from 'react'


class Child extends Component {
   render() {
   return <h1> I am a {this.props.gender}</h1> 
 }
}

The Child component will now receive props from the Parent component.

import Child from './child'

class Parent extends Component {
   render() {
   return (
     <div>  
      <Child gender="male" />
      <Child gender="female" />
    </div>
) }
}

// translates to

class Parent extends Component {
render() {
 return (
     <div>  
      <h1> I am a male</h1> 
      <h1> I am a female</h1>
    </div>
) }
}

Supplying props from a class method

You can supply props into a child component by calling a method.

class Parent extends Component {
getBoy() {
   return "boy"
}

getGirl() {
   return "girl"
}

render() {
 return (
     <div>  
      <Child gender={this.getBoy} />
      <Child gender={this.getGirl} />
    </div>
) }
}

Setting default props

Set default value for the props argument. That way if a prop value is omitted from parent, you can use the default value instead.

function Child({gender = 'male'}) {
   return <h1> I am a {gender} </h1> 
}

// import child

function Parent() {
 return (
  <div>
      <Child /> // omitted
      <Child gender="female" />
  </div>
   )
}


// translates to

function Parent() {
 return (
  <div>
      <h1> I am a male</h1> 
      <h1> I am a female</h1>
  </div>
   )
}

Using spread syntax with props

You can also pass in an object as props to a component using the spread syntax.

let details = { name: "kingsley", gender: "boy"}

function Parent() {
  return (
  <div>
      <Child gender={...details} /> // My name is kingsley and I am a boy
  </div>
   )
}

When then access each individual properties using object destructuring

function Child({name, gender}) {
   return <h1> My name is {name} and I am a {gender} </h1> 
}

Wrapping Up

React props allow us pass data into React components. React props should only be passed from a reference (such as parent component). Data from props can be accessed by child and then displayed on the view (template).