Using React State and Props

Intro:
React serves as a popular JavaScript library for building intuitive User Interfaces (or UI’s for short). A key feature of React compared to other libraries is the ability to manage data within components using what is referred to as “State” and Props”. In this post, we will dive into the concepts of State and Props and how we’re able to use them to effectively manage and update data within the React Components.

State: Creating & Managing Components data with state
In React, state serves as the internal data of a component. This allows components to dynamically maintain and update their own data. To use state, we must import the “useState” hook available in React’s functional components library. Note* This should be imported above the component function at the top of your text editor along with any other imports to the file.

Once imported, we use the “useState” hook to define the name of our state variable and its accompanying setter function. In this example we’ll be working on a “Toggle” to switch the page between Light-Mode and Dark-Mode. A general rule of thumb is to name the function to match the variable prefaced with the word “set”, since the purpose of this function is to “set” the variables state. You may be wondering about the Boolean passed to the “useState” function. This is where you set the initial or “Default” value of state. Being this is a toggle for dark/light mode, we’ve defaulted to false, so the page starts in light-mode. Therefor isDark is equal to false until we use the setIsDark function to change this state.

Now for the interesting part where we work with updating state. To do so, we use the “setter function” provided by “useState” which in our case is “setIsDark”. Let’s say we want to change the Boolean value from true or false. We define a “handleToggle” function and inside use the setter function to change the value of the state variable. Note* Although using the setter function itself may work, best practices are to encase them in a separate function so you don’t lose context when passing as props(which we’ll dig into next). We can now use our newly created function as an onClick event which will trigger the function.

Above you can see not only have we passed the handleToggle function down to the onClick event for a button we’ve rendered. But we also created a ternary inside the return statements div to manipulate the className based on the current state of the variable. In this case, if isDark equals true, “dark-mode” will be the className and if false, the className will be “light-mode”. Next we create CSS styling for both “dark-mode" and "light-mode”. Now when we use the onClick event to trigger the toggle function the state will be updated accordingly. When state is updated, React automatically re-renders the component reflecting the new value. So when isDark equals false, the screen is in light-mode but if we click the button our handleToggle function switches the Boolean value to true, which sets the className to dark mode and applies the corresponding styling seen below.

Props: Passing Data to Child Components
Props, which is short for properties, allow us to pass data from parent components to child components (those below them in the hierarchy). To do so, we simply include the desired prop as an attribute when rendering the child. As an example, in the code below we’re passing our newly created handleToggle function down to the child “Card”. For this to work we need to make sure we’ve imported the child component (as seen on line 2)

Props: Accessing Props within Child Components
In the above code we’ve passed the handleToggle function down to the Card component as an attribute where we’ve rendered the component. Now within the Card component, to access the props passed to a component, we use the props object. Props are accessed by their corresponding attribute names which in this case we’ve named as the initial function to avoid confusion. Props allow us to pass any type of data to child components, in our case a function but you can also pass strings, numbers, or even objects. This flexibility enables powerful component composition and reusability within React applications.

Conclusion:
In this blog, we explored the concepts of state and props in React. State enables components to manage and update their internal data dynamically. This allows for an interactive and responsive user interface. Props on the other hand assist with the flow of data between parent and child components enabling composition and reusability.

By understanding how to create and update state using the useState hook and how to pass and access props in React components, you have the necessary tools to be able to effectively manage the data within your applications. These are some of the fundamental concepts that will serve as building blocks for further development.