Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

September 27, 2021 04:57 pm GMT

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> }

// import childfunction Parent() {  return (  <div>      <Child />      <Child />  </div>   )}// translates tofunction 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 childfunction Parent() {  return (   <div>      <Child gender="boy"/>      <Child gender="girl"/>   </div>   )}// translates tofunction 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 toclass 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 childfunction Parent() { return (  <div>      <Child /> // omitted      <Child gender="female" />  </div>   )}// translates tofunction 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).

Join my newsletter

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

Original Link: https://dev.to/ubahthebuilder/understanding-react-props-1b3d

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To