React.js State and Props

React is a Javascript library that has become increasingly popular since it's release just under a decade ago. It is now the most popular and widely used Javascript library. In this blog, I am going to discuss how React state and props work.

Components

Before discussing props and state, I would first like to explain what a component is in React. A component is basically a function that takes in props and returns JSX. They are the building blocks of React because we can write reusable code inside them and they execute that code and render it to the DOM. Here is a basic component.

function Home() {
  return (
    <div id="home">
      <h1>Home</h1>
    </div>
  );
}

This is a component that is named "Home". This component is not taking in any props but it is returning JSX. This component will render a div element with an id of "home" with an h1 element with inner text of "Home" inside of it.

Props

In React, props are short for properties. React uses props to pass data between React components. In React, we can only pass props from parent components to child components. They can not be directly passed from child components to parent components. Here is an example of props being passed from a parent component to a child component.

function ParentComponent() {
    return (
        <ChildComponent name="child" />
)
}

function ChildComponent(props) {
    return (
       <h1>{props.name}</h1>
)
}

So here the parent component is returning, as well as passing data down to it's child component through props. It is giving it a name and that name is "child". When the parent is passing down data, React creates a props object with the key and value pairs that the parent is passing. So in this example, a props object is created with a key of name and a corresponding value of "child." So now for the child to access this data, it has to accept the props object as a value and then it can access the data inside by using dot notation on that props object.

State

In React, state is data that will change over time as users interact with the React application. It is dynamic and allows us to easily create dynamic apps. State allows us update and change data within a component without requiring the parent component to have to send that updated data. In order to use state, we must import the react hook called useState inside of our files like so:

import { useState } from "react"

Now in order to have some data be dynamic and be able to change over time, we must set state on that data using useState. For example say we have a number count and that count is going to increase every time a user does something on our page. We would need to set state on the count variable like so.

const [count, setCount] = useState(0)

useState automatically returns an array with two variables in it. The first variable (in our case, count) references the current or initial value of that state that we set(0). The second variable (setCount) is a function that allows us to update the state of the first variable. To update or set state, we call the second variable and type how we want to update state inside of it. For example:

setCount(count + 1)

These are the basic fundamentals of React state and props. There can be many more intricacies when working with them, but I wanted to give a basic overview and hopefully help whoever reads this to gain a better understanding of how state and props work in React.