Understanding State and Props

As an internet user, you've probably noticed notable improvement in modern web applications compared to even a decade ago when front-end libraries were new. The idea behind React and other popular front-end frameworks is reactivity. Update the screen to show changes even if the user hasn’t refreshed the page. That requires the concept of state – current ‘state’ of things, if you will. Props, by extension, is a way to share data or ‘changes’ from one component to the next.

In this article, we will discuss state and props, foundational features of React that allow us to build interactive applications and utilize component reusability for easy and fast development speeds.

State

As the name suggests, state is a JavaScript object that keeps track of latest developments in the app. Every component can have a state. Let’s say we have a small dropdown component and users can choose one of three options. In that case, you could use state in number of ways. For one, you could store users’ current choice, especially if its important to other elements and values. You could also have a Boolean property in state object that determines whether the dropdown should be rendered or not. If the Boolean is false, input element will not be rendered.

Whenever you get a new notification on Facebook, it’s because your friends’ actions caused the state to change, which was reflected on the screen by changing (or adding) the number of notifications in the red circle. That’s how React works – it keeps track of the state to ensure that what the user sees is reflected on the page.
To put it simply, the state can be useful for a number of features – from conditional rendering to conditional styling and user validation. This article shows you how to set react boolean attributes. All of these are dynamic features of the app that improve user experience.

JSX is a template language for React and it allows you to embed dynamic expressions in it. You can use a ternary operator to set a condition using value from the state, and conditionally an element, or render another element if the condition is not met. You can use the logical AND operator the same way. Note that JSX requires you to use curly braces to insert conditional expressions into the layout.

You can use similar approach to dynamically customize elements’ appearance according to the state. Set inline styles to an object, where property represents CSS property and value represents its respective value. Except because inline styles are a normal JavaScript object, you can also set properties equal to values from the state. Or conditionally generate a value based on current value in the state. In effect, element will change appearances in response to users’ actions that update the state. Which brings us to.

Changing the state

Updating the state is very important in React. When the state changes, component automatically re-renders and updates the screen. Without state changes React would be static.

Most of the time state changes in response to user events, although sometimes it can change in side-effects as well. In the end, event handlers are key to managing state changes in React.
When working in class components, React requires you to use the setState() method to update the state. You can not change only one property. You need to pass an entire state object with the changed property. Spread operator is often useful to copy the existing state object and change only the relevant properties.

Updating the state is easier when you use functional components and the useState hook. It returns two values – the variable to hold state value, and the function to update it. You need to define two variables to hold these values, and then simply use the function to update the state. Remember that the initial argument to the useState() hook will be the default value of the variable.

You can use the SyntheticEvent instance to access current input values to store them in the state. When it comes to text input types, you need to access e.target.value to get current value in the field. You can pass that as the argument to the function that updates the state. The app will re-render and state value will be reevaluated.

Props

As you know, React library is a component based library. More importantly, components are reusable. This saves a lot of time as you can define a component once and reuse it whenever you need. React applications can also be looked at as component trees with multiple branches made up of child components.

Props comes in handy when you need to pass data from one component to the next. Usually that is from parent components to children, but there’s also a workaround that allows you to pass data from child components to parents.

In terms of syntax, props look very similar to attributes in HTML. Except you can choose any name for props – so they are more like custom attributes for components.

Props allow you to pass more than bits of data. You can also pass functions to child components. For example, pass an event handler defined in parent component to handle user interactions in the child component. Or you can get window width on resize and pass pixel value via props. You can also pass an entire component via props. Here are specific examples.

React also imposed several important rules for props. For one, they are immutable. Child components can not change props passed down to them. Any change to props needs to happen in parent components. You can think of props as argument to a function. Once passed, child components’ job is to work with props, not change it.