ReactJS Fundamental — Props & State Simplified
One of the awesome features of React is the ability to manage your data and properly re-render your application when your data changes. Props and State are CORE concepts of React in regards to when you are thinking about data. Likewise, it can be a bit confusing regarding when to make use of Props and State.
Changes in props and/or state trigger React to re-render your components and potentially update the DOM in the browser
Props
Props allow you to pass data from a parent (wrapping) component to a child (embedded) component. simply put, they are like an argument to a function
Props are useful when displaying a piece of information inside a component without hard coding it, i.e. it is a variable to a function
Let's have a look at the example below
AllMenu Component
//AllMenu Component
const allMenu = () => {
return (
<div>
<Menu item="Salad" />
</div>
);
}
In the code snippet above, item
is the custom property (prop
) set up on the custom Menu
component. We basically replicate the default HTML attribute behavior we already know (e.g. <input type="text">
informs the browser about how to handle that input).
Menu Component
//Menu Component
const menu = (props) => {
return (
<div>
<h2>{props.item}</h2>
</div>
);
}
The Menu
component receives the props
argument. You can of course name this argument whatever you want - it's your function definition, React doesn't care! But React will pass one argument to your component function => An object, which contains all properties you set up on <Menu ... />
. {props.item}
then dynamically outputs the item
property of the props
object - which is available since we set the item
property inside AllMenu
component (see above).
State
Whilst props allow you to pass data down the component tree (and hence trigger a UI update), State is used to change the component from within.
Changes to state also trigger a UI update
class NewMenu extends Component {
// state can only be accessed in this form in class-based components!
state = {
item: 1
};
render () {
// Needs to be implemented in class-based components! Needs to return some JSX!
return (
<div>{this.state.item}</div>
);
}
}
Above, the NewMenu
component contains state
. Only class-based components can define and use state
. You can, of course, pass the state
down to functional components, but these can't directly edit it.
state
simply is a property of the component class, you have to call it state,
the name is not optional. You can then access it via this.state
in your class JSX code (which you return in the required render()
method).
Whenever state
changes, the component will re-render that section of your application and reflect the new state. For props, if there is a need for a change, it has to be done outside the component, most likely it will be a state stored somewhere else in your application that is been passed down as props.
State comes handy when you need to re-render or update your application based on some changes or something the user has done, so if you want to change something in your application, you need to store them in the state so they can properly re-render when there are changes.
If you have various form element like the input field, checkbox and the likes that need to be updated by the user, State does a good job in capturing what value is coming in and what value is been updated.
The big difference between Props and State is that you can pass Props into a component, it is handled outside of a component and must be updated outside of the component but State is handled inside of the component
One of the major challenges faced out there in choosing when to use State or Props is caused due to the fact that proper thought is not giving to what data is going to be handled by the component. If you are handling the data inside the component only and nowhere outside of it, like in the parent above, then make use of the State. If you are handling the data outside the component, then you need to pass it in via a props
If your information is static and never going to change then you need a Props, like we said earlier props are for things that are going to be passed down from the parent and don't change inside the component
In conclusion, those are the major difference between state and props, if you have other beneficial opinions, simply hit the comment below.
If you found this article helpful, share/retweet it and follow me on twitter @infinitypaul