Props and useState: React Basics From a Beginner POV

Introduction

React comes packed with many useful tools to help developers build efficient and scalable frontends. While learning react, hooks and props were difficult for me to grasp onto at first. After some time working with these tools, I am confident to give a quick and concise rundown on how these work.

React Props

Props are the one of the fundamental building blocks to really using react to its full potential. Props allow you to pass down information as an object from a parent component to a child component. Props can hold any type of data including functions.

Props Syntax

Passing down props from a parent component is very easy. In the example below I will pass a string and a number down to the child component.

function ParentComponent(){
return <ChildComponent string="Hello World" number=10 />
}

The props "string" and "number" are being passed down into the child component above. They are passed down by declaring a variable inside of the component that is returned by the parent component. To access these value inside of the child component we will need to add props as the argument to the child component.

function ChildComponent(props){
return <div></div>
}

The information we passed from the parent component is now available inside of the props object. We can now access this information using dot notation and use it anywhere inside of our child component.

function ChildComponent(props){
console.log(props.string) // will return Hello World
return <div>{`My favorite number is ${props.number}`}</div>
}

Props Destructuring

Props destructuring is the another way of passing props down from parent components that I think makes accessing props in the child component much easier and straightforward. Destructuring props eliminates the need to use the 'props' argument.

//ParentComponent
function ParentComponent(){
return <ChildComponent string="Hello" number=10 />
}

//ChildComponent
function ChildComponent({ string, number }){
return <div>{`${string}, my favorite number is ${number}`}</div>
}

In the example above, rather than passing 'props' as the argument, we can destructure all the props into the variable name that was assigned to them we they were passed down. We do this by surrounding the variable names with {} inside of the argument of the child component. This will allow use to use string rather than props.string to access the information.

useState Hook

What is the useState hook? The useState hook is used when you want to add "state" to a specific component in your react project. State is dynamic data that lives inside of the component and changes over time as users interact with the application. State allows you to update information in a component without having to send different props from the parent component.

useState Syntax

The first step to using the hook useState is to import it into the component you are working with:

import React, { useState } from "react"

Once you have imported the hook into the component you will need to setup the hook itself. Every useState hook requires a variable, setter function, and an initial value. The variable is what will be used to access the value that is currently held in state. The setter function is used to reassign the value of the state. The initial value is, well exactly as it sounds, the initial value of the state. In the example below, I will use the useState hook to set up a counter variable.

import React, { useState } from "react"

function Counter(){
const [count, setCount] = useState(0)
//       ^       ^                 ^  
//   variable  setter function|initial value
}

Once the hook is setup, you can start using it in you application!

Example useState Functionality

import React, { useState } from "react"

function Counter(){
const [count, setCount] = useState(0)

return (
<button onClick={setCount(count + 1)}>{count}</button>
)

In the example above, the initial value set in state is zero, and with each click of the button the text content of the button will increase by 1. When the state is updated by the setter function (setCount) the component re-renders and the new value of count is displayed on the button. This is a very basic example of how useState works, but it gives a good idea of how the useState hook works inside of components.