Props and State in React – differences and use cases

React is a great tool for building user interfaces. State is the main feature that makes it interactive. Without state, all web apps built in React would be static. Most people use React because it’s interactive and can respond to user’s actions. Yes, you can do a lot of things using plain JavaScript, but you can improve upon that with React.

State and virtual DOM concepts are not exclusive to React, but they are integral features of the library. React lives up to its name thanks to these two features. They make it possible for React to react to user’s actions.

A lot of things in React depend on state. You can use state to store inputs, like what users enter into a certain field, or whether a checkbox is selected. If it is, the state would be set to true, if not, false. Then you can use this value to do everything conditionally. Apply certain classes based on a condition, or even inline styles.

State values can be used to render elements conditionally as well. For example, state could be used for form validation. React is JavaScript-based library, so you can write JavaScript code. Once you store user input in the state, you can write a JavaScript function that evaluates user’s input to make sure it satisfies a certain criteria.

If you’re going to evaluate an email, you could use the indexOf() function to make sure user input contains ‘@’. In the state, you could have something like error property, which checks current status of errors in the form. If the function determines that user inputs are invalid, it will set the error property to true.

This guide describes how to use state to build forms with proper UX:

Then in your JSX, you could look at the error state value to conditionally render an error message.

JSX does not have a built-in way to conditionally render certain elements based on state value. You need to use curly braces to write a valid JavaScript expression within JSX. You need a ternary operator to evaluate the state value.

Props is also very important React feature. React recommends that the parent component should maintain the state. Child components can have input elements, but these child elements need to update values in the parent component’s state. Also, many child components are only presentational, they don’t have logic in them.

So the parent components needs some way to pass down state data to child components. That’s where props come in. Thanks to props, React components can be reused. When a certain child component is invoked, you can pass it different props.

Thanks to props, you can have a single source of truth. This is when the parent component contains all the essential values and they are passed down to children. This facilitates debugging as well. If the prop value is not what you expect, you will know where it’s coming from.

Sometimes you can define default props as well. These values are stand-ins when props are not passed down from the parent.

Leave a Reply

Your email address will not be published. Required fields are marked *