How I add react-todo-list to localstorage?

This will involve first saving the todos whenever there is a change. One place this might be done is in a useEffect() call with dependency array [tasks]. This can be done in places other than a useEffect but for now, let's try:

In App.js

useEffect(() => {
   localStorage.setItem("todos", JSON.stringify(tasks));
}, [tasks]);

Next, we also need to load stored todos when the app is reloaded. This can be done at the time when the component mounts. Again we can use useEffect() with an empty dependencies array.

In App.js

useEffect(() => {
   localStorage.getItem("todos", setTasks(JSON.parse(tasks)));
}, []);

Now coming back to the storing part. Arguably, it is best to set them in localStorage at the time you update the state, rather than listening to state changes using an effect. For this, you can simply find every usage of setTasks() and set the localStorage too. But this is done at multiple places e.g. during form submit, delete, etc. So there is a bit of code repetition this way.

import React from 'react'
import { useState, useEffect } from 'react'
import Form from './components/Form'
import Todos from './components/Todos'
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';


const App = () => {

  

  
 const [tasks, setTasks] = useState([
    {
      task: "ES 6 standartlarını öyrənmək ",
      completed: false
    },
    {
      task: "filter(), find() funksiyalarının fərqini öyrənmək",
      completed: false
    },
    {
      task: "İngilis dilində 1000 söz əzbərləmək",
      completed: true
    },
    {
      task: "Yeni framework öyrənmək",
      completed: false
    },
    {
      task: "Evə çörək almaq",
      completed: false
    }
  ]);



  const [inputValue, setInputValue] = useState('');

  const [tasksChechked, setTasksChechked] = useState(0);

  useEffect(() => { setTasksChechked(tasks.filter(task => task.completed).length) });

  const handleChange = (e) => {
    setInputValue(e.target.value);
  }

  const formSubmit = (e) => {
    e.preventDefault();
    if (inputValue !== '') {
      const newTask = {
        task: inputValue,
        completed: false,
      }
      setTasks([...tasks, newTask])
      setInputValue('')
let myTask = tasks.push(newTask)
window.localStorage.setItem('myTasks',JSON.stringify(myTask))
      toast.success("Tapşırıq uğurla əlavə edildi");
    }
    else {
      toast.error("Zəhmət olmasa tapşırığı daxil edin");
    }
  }

  const handleDelete = (index) => {
    const newTasks = [...tasks]
    newTasks.splice(index, 1)
    setTasks(newTasks)
let myTask = tasks.push(newTask)
window.localStorage.setItem('myTasks',JSON.stringify(newTasks))
    toast.error("Tapşırıq  silindi")

  }

  const handleDeleteAll = () => {
    setTasks([])
window.localStorage.setItem('myTasks','')
    toast("Bütün tapşırıqlar  silindi");

  }

  const Checked = (index) => {
    const newTasks = [...tasks];
    newTasks[index].completed = !newTasks[index].completed;
    setTasks(newTasks);
window.localStorage.setItem('myTasks',JSON.stringify(newTasks))
  }
//for load data from local storage
useEffect(()=>{
let myLocalTasks = JSON.parse(window.localStorage.getItem('myTasks'))
setTasks(myLocalTasks);
},[])
  return (
    <>
      <div className="content">
        <Form
          inputValue={inputValue}
          handleChange={handleChange}
          formSubmit={formSubmit}
        />

        <Todos
          tasks={tasks}
          handleDelete={handleDelete}
          handleDeleteAll={handleDeleteAll}
          Checked={Checked}
          tasksChechked={tasksChechked}
        />
      </div>

    </>
  )
}

export default App
// anything goes wrong please let me know