Learn React In 30 Minutes

What people said

Recommends honzza dvorak · 2022-06 · Stack Overflow · on “Passing an argument”

All your tasks in the list should have some IDs. I would suggest not removing the task from the UI and the array. Instead update the UI and the array after the task is edited in the modal using its ID. I would recommend a few easy to follow todo list tutorials. Using React library [LINK] will help you a lot. Todo list is usually a starter tutorial into the React world. How to build a Todo List App with JavaScript ( [LINK] ) How to Code A Better To-Do List - Tutorial ( [LINK] ) Learn React In 30 Minutes ( [this video] )

Cites Miklos Arpadfi · 2021-09 · Stack Overflow · on “How do I call on a function by either clicking the button or pressing enter?”

I've been learning ReactJS and made an app using Web Dev Simplified's video [this video] . As a next step I would like to add a keyUp or event listener (whichever works best) so the enter key can be pressed to Add Todo OR by pressing the add button. Here is the function that adds the input to the list. function handleAddTodo(e) { const name = todoNameRef.current.value if (name === '') return setTodos(prevTodos => { return [...prevTodos, { id: uuidv4(), name: name, complete: false}] }) todoNameRef.current.value = null} As I was looking for a solution, I found that hooks might do the trick, but I am not sure where or how to add one. <button class="add" onClick={handleAddTodo}>Add ToDo</button> And

Cites ohthepain · 2022-08 · Stack Overflow · on “Why is my Saved State Overwritten on Refresh in this Simple React Example?”

I am following this simple tutorial [this video] and can't get my saved state to work. I can see in the comments that other users are having to work around this issue. import React, { useState, useRef, useEffect } from "react" import TodoList from "./TodoList" import { v4 as uuidv4 } from 'uuid'; const LOCAL_STORAGE_KEY = 'todosApp.todos' function App() { const [todos, setTodos] = useState([]) const todoNameRef = useRef() useEffect(() => { console.log(`useEffect[]`) const storedTodos = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)); if (storedTodos) { console.log(`set todos to: ${JSON.stringify(storedTodos)}`) setTodos(storedTodos) // can't print here - value is set asynchronously // console

Cites q0987 · 2023-07 · Stack Overflow · on “Why the initialization from useEffect doesn't work for loading localStorage?”

Reference: [this video] I had an issue where I cannot initialize the todos from useEffect through localStorage . After adding two ToDo into the list and then click browser refresh button, all ToDo will not be able to load back. The trace looks as below: storedTodos size: 2 App.js:41 todos size: 0 App.js:34 storedTodos size: 0 App.js:41 todos size: 0 App.js:41 todos size: 0 It seems to me the setTodos(storedTodos) doesn't work as expected. The solution is to load the initialization through useState shown below. Question > Can someone please advice me that why this initialization doesn't work within useEffect ? Thank you function App() { const [todos, setTodos] = useState([]) // const [todos, setTo