React Breakdown: useState

Introduction

Hi there! Are you ready to learn about React's useState hook? Great! useState is a fun and useful tool that helps us make our React apps do cool things.

First, let's talk about what React is. React is a way to make websites and apps that can change and update without having to refresh the whole page. It's like magic!

Now, let's talk about what a hook is. In React, a hook is a special function that lets us "hook into" React features from our components. This means we can use React features in our components, which is super helpful.

useState is a hook that lets us add something called "state" to our components. State is like a box that holds information about something in our app. For example, if we were making a to-do list app, we could use state to hold information about the items on our list.

Let's Code!

To use useState, we first need to import it into our component from the React library. Then, we can call useState and give it an initial value for our state. This initial value can be anything we want, like a number, a string, or even an object.

Here's an example of how we might use useState in a component:

import React, { useState } from 'react';

export default function NameApp() {
// useState with initial value of "Princecodes"
const [name, setName] = useState("Princecodes");

return (
<div>
<h1>My Name</h1>
<p>{name}</p>
</div>
  );
}

In this example, we're using useState to store our name.

Notice that when we call useState, it returns an array with two items in it. The first item is the current value of our state, and the second item is a function that we can use to update the value of our state. In this example, we're using array destructuring to give names to these two items: name for the current value of our state, and setName for the function that updates our state.

// useState hook...
const [state, setState] = useState(initialValue);
// initialValue: An initial value for our state.
// state: The value that can be used all through our component.
// setState: A function to change the state.

The useState hook can create state for objects and arrays too.

import React, { useState } from 'react';

export default function TodoList() {

const mockTodos = ["Add sugar", "Add spice", "Add everything nice"]
// useState with initial value of mockTodos.
const [todos, setTodos] = useState(mockTodos);

return (
<div>
    <h1>To-DO List</h1>
</div>
  );
}

In this example, We're giving our state an initial value of an existing array (mockTodos).

We can write a function that adds more todos.

const addTodo = (todo) => {
    setTodos([...todos, todo])
}

We use the spread operator "... " to get all the content of todos and add the new todo item to the end.

Now that we have state in our component, we can use it to show the items on our to-do list. Using the map function, We'd loop through the items in our items state and create a list item for each one. And add a button to add a new to-do item to the list anytime we click.

import React, { useState } from 'react';

export default function TodoList() {

const mockTodos = ["Add sugar", "Add spice", "Add everything nice"]
// useState with initial value of mockTodos.
const [todos, setTodos] = useState(mockTodos);

const addTodo = (todo) => {
    setTodos([...todos, todo])
}

return (
<div>
    <h1>To-DO List</h1>
    <button onClick={() => addTodo("New Todo")}>
        Add new todo
    </button>
    <ul>
        {todos.map(todo => (
            <li>{todo}</li>
        ))}
    </ul>
</div>
  );
}

Conclusion

That's it! useState is a simple but powerful tool that can help us add state to our React components. Hope you liked it.