Cant get the selected value from input

Question

I'm trying to get the task value from the button when pressed to show it in the side nav, but the value is always empty even though it's not. help appreciated.

See the comments in the code for more details:

import './index.css';
import React, {useState} from 'react';

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

const TodoListItem = (props) => {
  //for task list
  const [tasks, setTasks] = useState(['']);

  //toggling the side menu
  const [toggle, setToggle]= useState(true);

  //toggling grid layout
  const [grid, setGrid]= useState('');

  //getting the selected item !! not working
  const [selectedTask, setSelectedTask]= useState('');

  //brings out the side nav bar
  const TodoItemDetails = () => {
    setToggle(false)
    setGrid("grid grid-cols-2")
  }

  const onFormSubmit = e => {
    e.preventDefault();
  }

  return (
    <div class="bg-gray-100 items-center justify-center min-h-screen min-w-screen p-4">
        <div class={grid}>
          {/* grid one */}
          <div>  
            {/* task form */}
            <form onSubmit={onFormSubmit} class="bg-white rounded py-4 px-2 my-4 h-16 shadow-sm">
              <input 
                class="w-[92%] 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"
              />
              {/* task add button*/}
              <button 
                type="submit" 
                class="text-blue-500 float-right text-2xl -translate-y-0.5 -translate-x-1" 
                onClick={() => {
                  let taskdom = document.getElementById("task"); 
                  {/* creates individual task */}
                  let task = <button
                                onClick={() => {
                                {/* nav bar comes out whne the invidual task is pressed with the task value */}
                                TodoItemDetails();
                                {/* the below setSelectedTask should set */}
                                {/* the selected task and get the value from taskdom.value but its always empty (cont) */}
                                setSelectedTask(taskdom.value);
                              }}
                              {/* even though taskdom.value works properly right after that */}
                              class="bg-white w-full hover:bg-gray-200 p-4 my-1 rounded shadow-sm text-left">{taskdom.value}</button>
                  {/* adds the new task to the the task array */}
                  setTasks((oldTasks) => [ ...oldTasks, task ])   
                  
                  {/* empties the task text box */}
                  taskdom.value = "";
              }}
              >+</button>
            </form>

            {/* shows all the tasks */}
            {tasks}

          </div>

          {/* grid two: side nav bar */}
          <div hidden={toggle}>
            {/* nav bar hides itself when this is pressed !!!! this value is supposed to be from the pressed value but its empty */}
            <button onClick={() => {
              setToggle(true)
              setGrid("")
            }}>{selectedTask}</button>
          </div>

        </div>
    </div>
  );
}

export default App;

sorry for bad formatting...this is the first time I'm posting a question even though I've been using stack overflow for 2 years and I don't know how to exactly ask this question...

Answer 1

You could use a useRef hook on your input

// logic
const [selectedTask, setSelectedTask]= useState('');
const inputValue = useRef('');

const handleInput = () => {
    setSelectedTask(inputValue.current.focus());
}

// render
<input type="text" id="task" ref={inputValue} />
<button onClick={handleInput}>Click</button>

Then you should be able to use the state.

Answer 2

The React way to do this is to use a controlled input element and store the value in local state on change. You can then get it from the state when the button is clicked.