This content originally appeared on DEV Community and was authored by Kingsley Ubah
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).
Join my newsletter
I release weekly newsletter on how to grow a strong mindset and succeed as a web developer. Subscribe here.
This content originally appeared on DEV Community and was authored by Kingsley Ubah
Kingsley Ubah | Sciencx (2021-09-27T16:57:03+00:00) Understanding React Props. Retrieved from https://www.scien.cx/2021/09/27/understanding-react-props/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.