DEV Community

Cover image for Understanding React Props
Kingsley Ubah
Kingsley Ubah

Posted on • Originally published at ubahthebuilder.tech

Understanding React Props

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> 
}
Enter fullscreen mode Exit fullscreen mode

// 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>
   )
}
Enter fullscreen mode Exit fullscreen mode

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> 
}
Enter fullscreen mode Exit fullscreen mode

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>
   )
}
Enter fullscreen mode Exit fullscreen mode
  • 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> 
 }
}

Enter fullscreen mode Exit fullscreen mode

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>
) }
}
Enter fullscreen mode Exit fullscreen mode

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>
) }
}
Enter fullscreen mode Exit fullscreen mode

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> 
}
Enter fullscreen mode Exit fullscreen mode
// 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>
   )
}
Enter fullscreen mode Exit fullscreen mode

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>
   )
}
Enter fullscreen mode Exit fullscreen mode

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> 
}
Enter fullscreen mode Exit fullscreen mode

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).

Join my newsletter

testimonial from subscriber

I release weekly newsletter on how to grow a strong mindset and succeed as a web developer. Subscribe here.

Discussion (1)

Collapse
rnowotniak profile image
Robert Nowotniak

Sorry, is this a correct statement?
(...) use 'props' parameter. Without passing this parameter, you can access any props from a parent.