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