React Foundations: Adding Interactivity with State | Next.js

7Chapter 7Adding Interactivity with StateLet's explore how React helps us add interactivity with state and event handlers. As an example, let's create a "Like" button inside your HomePage component. First, add a button element inside the return() statement: index.htmlfunction HomePage() { const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton']; return ( <div> <Header title="Develop. Preview. Ship." /> <ul> {names.map((name) => ( <li key={name}>{name}</li> ))} </ul> <button>Like</button> </div> ); } Listening to events To make the button do something when clicked, you can use the onClick event: index.htmlfunction HomePage() { // ... return ( <div> {/* ... */} <button onClick={}>Like</button> </div> ); } In React, event names are camelCased. The onClick event is one of many possible events you can use to respond to user interaction. For example, you can use onChange for input fields or onSubmit for forms. Handling events You can define a function to "handle" events whenever they are triggered. Create a function before the return statement called handleClick(): index.htmlfunction HomePage() { // ... function handleClick() { console.log("increment like count") } return ( <div> {/* ... */} <button onClick={}>Like</button> </div> ) } Then, you can call the handleClick function when the onClick event is triggered: index.htmlfunction HomePage() { // ... function handleClick() { console.log('increment like count'); } return ( <div> {/* ... */} <button onClick={handleClick}>Like</button> </div> ); } Try running this in your browser. Notice in your developer tools how the log output increases. State and hooks React has a set of functions called hooks. Hooks allow you to add additional logic such as state to your components. You can think of state as any information in your UI that changes over time, usually triggered by user interaction. You can use state to store and increment the number of times a user has clicked the "Like" button. In fact, the React hook used to manage state is called: useState() Add useState() to your project. It returns an array, and you can access and use those array values inside your component using array destructuring: index.htmlfunction HomePage() { // ... const [] = React.useState(); // ... } The first item in the array is the state value, which you can name anything. It's recommended to name it something descriptive: index.htmlfunction HomePage() { // ... const [likes] = React.useState(); // ... } The second item in the array is a function to update the value. You can name the update function anything, but it's common to prefix it with set followed by the name of the state variable you're updating: index.htmlfunction HomePage() { // ... const [likes, setLikes] = React.useState(); // ... } You can also take the opportunity to add the initial value of your likes state to 0: index.htmlfunction HomePage() { // ... const [likes, setLikes] = React.useState(0); } Then, you can check the initial state is working by using the state variable inside your component. index.htmlfunction HomePage() { // ... const [likes, setLikes] = React.useState(0); // ... return ( // ... <button onClick={handleClick}>Like({likes})</button> ); } Finally, you can call your state updater function, setLikes in your HomePage component, let's add it inside the handleClick() function you previously defined: index.htmlfunction HomePage() { // ... const [likes, setLikes] = React.useState(0); function handleClick() { setLikes(likes + 1); } return ( <div> {/* ... */} <button onClick={handleClick}>Likes ({likes})</button> </div> ); } Clicking the button will now call the handleClick function, which calls the setLikes state updater function with a single argument of the current number of likes + 1. Note: Unlike props which are passed to components as the first function parameter, the state is initiated and stored within a component. You can pass the state information to children components as props, but the logic for updating the state should be kept within the component where state was initially created. Managing state This was only an introduction to state, and there's more you can learn about managing state and data flow in your React applications. To learn more, we recommend you go through the Adding Interactivity and Managing State sections in the React documentation. Additional Resources: State: A component's memory Meet your first hook Responding to Events 7You've Completed Chapter 7You added basic interactivity to your application with state and event listeners.Next Up8: From React to Next.jsReview your code, and see how you can continue learning React.Start Chapter 8Was this helpful?Start Chapter 8Sign inSign in to save progress