![]() and of course, this state must be initialized to an empty array. We need another state to holds the list of todos – todoList. The initial value is an empty string and we call set state every time the text in the input field is changed. This creates a state to hold a single todo that is inputted in the input tag. ![]() Functional component looks cleaner and easier.Īnd don’t forget to import useState from react. We can have as many useState as needed Making the Todo app with react hooks import React, from "react" Ĭonst = useState() Ĭonst rootElement = document.getElementById("root") įirst of all, we know that we have to use states for this app, but since hooks coming, we don’t have to make a class to have the state anymore. The useState function accept one parameter which is the default value of this state. The second variable is a function that is similar to setState that we will use to set/update the state. The first variable is a state value itself, we use it when we want to get value We destruct the results from useSate and name it to “todo” and “setTodo”. It’s similar to tState in a class, except it doesn’t merge the old and new state together. – Įxamining the example below: const = useState("") You can call this function from an event handler or somewhere else. useState returns a pair: the current state value and a function that lets you update it. React will preserve this state between re-renders. We call it inside a function component to add some local state to it. UseState is a Hook (we’ll talk about what this means in a moment). In this post I want to make a really simple todo app using react hooks, main focus on useState function, how it works and is different with the old way we using state. We don’t have to deal with classes and setState and some others things… ![]() I would give a huge change in the way we write react application. Finally, react hooks are officially released.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |