In our last article, we talked about React Components, and how they describe the UI. Sometimes, components 'communicate', by passing data to each other. This communication is possible with Props.
What is Props ?
Props is an optional object of propertie(s), usually passed down to components from other components.
Props is useful in passing data, from the parent component to the child component. This feature enables the re-use of components, where we just change prop values if we want the components rendered a little differently.
To specify props, we set them as attributes. Let us look at an example:
{/* App.js file */}
import React from 'react';
import ParentComponent from './Components/ParentComponent';
import ChildComponent from './Components/ChildComponent';
const App = () =>{
return (
<>
<ParentComponent>
{ /* here we set name as a prop value or as props */}
<ChildComponent name = "Ronaldo"\>
<ChildComponent name = "Messi"\>
<ChildComponent name = "Neymar"\>
</ParentComponent>
</>
)
};
export default App;
{/*ParentComponent.jsx file */
import React from 'react'
const ParentComponent = () =>{
return <p>The following are the best football players of the last decade</p>
}
export default ParentComponent;
{/*ChildComponent.jsx file*/
import React from 'react'
const ChildComponent = (props) =>{
return <p>{props.name}</p>
}
export default ChildComponent;
The above code outputs
The following are the best football players of the last decade.
Ronaldo
Messi
Neymar
Components can take multiple prop values, by specifying multiple attributes separated by a space. For example:
{/*In the App.js file*/}
<ParentComponent>
<ChildComponent name='Victory' job='frontend engineer'/>
</ParentComponent>
{/*In the ChildComponent.jsx file*/}
const ChildComponent =(props)=>{
return <p>Hi, I am {props.name}, a {props.job}</p>
}
The code above outputs
Hi, I am Victory, a frontend engineer
Remember, at the beginning of this article we described props as an object. Hence props can be destructured.
The code above, can be further simplified using the ES6 destructuring syntax.
{/*In the ChildComponent.jsx file*/}
{/*Destructuring in the function parameter*/}
const ChildComponent =({name,job})=>{
return <p>Hi, I am {name}, a {job}</p>
}
**OR**
/*In the ChildComponent.jsx file*/}
const ChildComponent = props =>{
{/*Destructuring in the function body*/}
const {name,job} = props;
return <p>Hi, I am {name}, a {job}</p>
}
Notice any difference between the code variants above ? Let me know in the comments.
A real life scenerio would be a card component that contains two button components, one of the buttons, says 'log in', the other, 'sign in'. Instead of creating two button components, we just create one button and re-use it, by passing props to represent the respective values of each button.
Props are a wonderful feature of React, but they have a limitation, props are immutable i.e they cannot be changed by the child component.
However React has a solution to this, called State.
We will be discussing React component state, in the next article.