State and Props in React - explained

Concepts of state and component reusability via props are not exclusive to React, but these certainly are foundational features of the library. That’s why I decided to explore these creative ways of storing and passing data and take a closer look at their practical use cases.

What is state in React?

At its core, React is intended for building interactive user interfaces. It’s great at keeping track of changes and responding accordingly. For example, immediately displaying a new comment if there’s one on Facebook. You could also say that React is designed to ensure that the rendered component is in accordance with the latest state of the component.

In turn, state is a JavaScript object that holds data that is prone to change. Data can be anything, for example: current online status (if true, React will display a green dot), dark mode (switch background and text colors to dark vs light), or text currently entered into the field (throw an error if it doesn’t meet requirements). As you can see, possibilities for using state to improve UI are endless.

Most React apps are structured with JSX, an HTML-like template language that makes it easy to define component and app layout. Inside JSX, you can use curly braces to conditionally style and render elements. React developers typically use state values to set conditions, so changing the state actually leads to changes on the screen. In turn, they set event handlers on user inputs, so users' actions update the state. This way, they can implement dynamic features where certain parts of the element render (and hide), or change their appearance in response to inputs from users.

You can achieve the same effect using the react-router library to render components based on URL. The library also allows you to read query params in React.

Conditional rendering using state

JSX is a simple language that looks a lot like HTML. Except it also gives you the ability to insert JavaScript expressions in your code, so you can conditionally render an element or a component. Let’s look at this example:

<div>{greet ? <h1> Hello World </h1> : null }</div>

You probably recognize the ternary operator. This is the simplest way to implement conditional rendering in JSX. You can also use if and switch, as described in this guide about using switch in React, but it has to be done outside the JSX.

If the greet state value is true, then the component will render the <h1> header. If it’s not, then the ternary operator will render nothing - null.

Conditional styling using state

Let’s look at another use case for state in React - conditional styling.

Similar to HTML, React allows you to set inline styles. But because React is written in JavaScript, inline styles need to be a JavaScript object. Names of CSS properties are mostly the same, only they need to adhere to JavaScript styling guidelines. Names separated by a dash need to be combined and camelCased. Their values can be strings or integers or booleans.

Similar to conditional rendering, you can set values for each CSS property to a ternary operator. The expression between curly braces will conditionally return a value depending on current value in the state. Let’s take a look at a simple example:

some text

In this case, React looks at backgroundColor state property. If it is true, the background of the div becomes black. If it’s not, then the background is white.

Notice double curly braces used in this example. One pair of curly braces tells JSX to interpret the following as a JavaScript expression, and another is to open and close a JavaScript object.

Props

Props are another way to deal with data in React. As you know, React library is based on the principle of reusable components. Web applications are nothing but component trees made up of one component at the top and many children components. Components can be at different levels. A parent component might have a child component that has more child components of its own. In that case, the child is also the parent component. Props allow you to pass data top to bottom - from parent elements to their children.

The syntax for passing data via props is simple. React components are like custom elements in React, and props are like custom attributes for passing data into the component. That data can be used for content, for rendering, styles, and any other use case for data inside the component. State values can also be passed via props. Not only that, but you can also pass functions via props. React developers often use this to pass event handlers, so they can be called inside child components. This is a way to pass data from the child component to the parent in React.

Inside the child component, you can use destructuring syntax for easier access to data passed down via each individual prop. In case of functional components, function definitions accept props as an argument. You can destructure props argument within the function definition to access individual props.

Rules for using props in React

Uni-directional data flow - data can only be passed down from parent components to children. One way to go around this rule is to pass functions via props.

Immutability - data passed down via props can not be changed. Props are like passing arguments to a function. You can not change the argument after it is passed. Similarly, trying to mutate the data passed down via props will throw an error.

Structure - props look like attributes, but data is actually structured as an object.

Summary

State and props are two of the most important features in React. They allow you to collect users’ inputs and put them to good use to build dynamic and interactive web applications that users love.