I want to set the placeholder using the tasks array but the page turns blank when i refresh the page, the correct values are shown before refreshing but the page turns blank when refreshed.

<input type="text" id="edit" placeholder={tasks.find(task => task.id === parseInt(selectedTask)).value}  ref={editTaskRef} onBlur={() => editTask()}/>

I tried making it a function and that loads the page but doesnt set any values in the placeholder

<input type="text" id="edit" placeholder={() => tasks.find(task => task.id === parseInt(selectedTask)).value}  ref={editTaskRef} onBlur={() => editTask()}/>

full code of the page

import React, { useState, useRef } from 'react'

function App() {
  return (
    <div>
      <TodoListItem />
    </div>
  )
}

const TodoListItem = () => {
  //for inputs
  const inputTaskRef = useRef()
  const editTaskRef = useRef()

  //for task management
  const [tasks, setTasks] = useState([])
  const [index, setIndex] = useState(0)

  //for sidebar
  const [toggle, setToggle] = useState(true)
  const [grid, setGrid] = useState("") 
  const [selectedTask, setSelectedTask] = useState("")

  //shows the sidebar
  const TodoItemDetails = () => {
    setToggle(false)
    setGrid("grid grid-cols-2")
  }

  //form handling
  const onFormSubmit = e => {
    e.preventDefault()

    let value = inputTaskRef.current.value

    if(value !== ""){
      let task = {
        id: index,
        task: <Task value={value} key={index} id={index} />,
        value: value
      }

      setIndex((index) => index 1)
      setTasks((oldTasks) => [ ...oldTasks, task ])

      inputTaskRef.current.value = ""
    }
  }

  //closes the sidebar
  const closeSideBar = () => {
    setToggle(true)
    setGrid("")
    editTaskRef.current.value = ""
  }

  //task hook
  const Task = (props) => {
    return(
      <li>
        <button onClick={() => {
          TodoItemDetails()
          setSelectedTask(props.id)
          editTaskRef.current.value = ""
        }} className="bg-white w-full hover:bg-gray-200 p-4 my-1 rounded shadow-sm text-left">{props.value}</button>
       </li>
    )
  }

  //for editing a task
  const editTask = () => {
    let value = editTaskRef.current.value

    if(value !== ""){
      let editedTaskIndex = tasks.findIndex(task => task.id === parseInt(selectedTask))
      tasks[editedTaskIndex].task = <Task value={value} key={index} id={selectedTask} />
      tasks[editedTaskIndex].value = value

      editTaskRef.current.value = ''
    }
  }
  
  //for deleting a task
  const deleteTask = () => {
    let deletedTaskIndex = tasks.findIndex(task => task.id === parseInt(selectedTask))
    tasks.splice(deletedTaskIndex, 1)

    editTaskRef.current.value = ''

    closeSideBar()
  }

  return (
    <div className="bg-gray-100 items-center justify-center min-h-screen min-w-screen p-4">
        <div className={grid}>

          <div>  
            <form onSubmit={onFormSubmit} className="bg-white rounded py-4 px-2 my-4 h-16 shadow-sm">
              <input className="w-[85%] sm:w-[87%] md:w-[90%] lg:w-[95%] h-full float-left focus:outline-none placeholder-blue-500 ml-2 py-1 focus:placeholder-black" type="text" id="task" placeholder="Add a task" ref={inputTaskRef} onFocus={() => closeSideBar()}/>
              <button type="submit" className="text-blue-500 float-right text-2xl -translate-y-0.5 -translate-x-1"> </button>
            </form>
            <ul>{tasks.map(task => task.task)}</ul>
          </div>

          <div hidden={toggle} className={"bg-white rounded py-2.5 px-2 ml-5 my-4 h-72 shadow-sm " grid}>
            <input className="col-start-1 col-end-3 w-100 h-12 float-left focus:outline-none placeholder-blue-500 focus:placeholder-black ml-2 " type="text" id="edit" placeholder={tasks.find(task => task.id === parseInt(selectedTask)).value}  ref={editTaskRef} onBlur={() => editTask()}/>
            <button className="col-start-1 col-end-2 text-blue-500 h-[400px] text-2xl mr-14" onClick={() => deleteTask()}>delete</button>
            <button className="col-start-2 col-end-3 text-blue-500 h-[400px] text-2xl ml-14" onClick={() => closeSideBar()}>x</button>
          </div>

        </div>
    </div>
  )
}

export default App

CodePudding user response：

When you first enter the page, selectedTask are just "" (empty string) from the initial state, that why it is show blank.

CodePudding user response：

When TodoListItem is first mounted the tasks and selectedTask are empty array([]) and empty string('') respectively. In case you want to prevent this data from resetting, you should store there value in localStorage using :

localStoarge.setItem('selectedtask', selectedTask); 
localStorage.setItem('tasks', JSON.stringify(tasks));

also make sure to set there initial value:

const [tasks, setTasks] = 
useState(JSON.parse(localStorage.getItem('tasks')) || []);

const [selectedTask, setSelectedTask] = 
useState(localStorage.getItem('selectedtask') || "")