How can I display item in ToDo List

Question

How to make todo list in react.I am following some tutorial how to work with react. This code is using input for adding item to list . How can I add item over h3 element instead input element? This code is working perfect , I am looking for another way . Thank you Here is full code .


import { useState } from 'react'
import { v4 as uuidV4 } from 'uuid'

const Header = () => {
 

const [input, setInput] = useState('')
const [todos, setTodos ] = useState([])

const onInput = (e) => {
  setInput(e.target.value)
  console.log(input)
}

const onFormSubmit = (e) => {
  e.preventDefault()
  setTodos([...todos, {id: uuidV4(), title:input, completed:false}])
  setInput('')
} 

  return (
    <section className='header'>
      <h1>ToDo List</h1>

      <form onSubmit={onFormSubmit}>
          <input 
                type="text"
                placeholder='Add Item'
                className='input'
                value={input}
                required
                onChange={onInput} />

          <button 
                className='btn'
                type='submit' > Add </button>      
      </form>
      <br /><br />
       <ul>
         {todos.map((todo) => (      
         
           <li className='todo-list'>  // here is output 
                                       // <h3> { ? } </h3>  it should go todo.title
                                       // can you show me how, pls ? 
              <input 
                 type="text"
                 value={todo.title}
                 className='list'
                 onChange={(e)=>e.preventDefault()} /> 
                

           </li>
         ))}
       </ul>

    </section>
  )
  
};

export default Header;

Junius L · Accepted Answer · 2022-01-25 03:54:25Z

1

Get the title of the todo from the todo object passed to .map() function.

<h3>{todo.title}</h3>

// Get a hook function
const {useState} = React;

const Header = () => {
  const [input, setInput] = useState("");
  const [todos, setTodos] = useState([]);

  const onInput = (e) => {
    setInput(e.target.value);
    //console.log(input);
  };

  const onFormSubmit = (e) => {
    e.preventDefault();
    setTodos([...todos, { id: Math.random(), title: input, completed: false }]);
    setInput("");
  };

  return (
    <section className="header">
      <h1>ToDo List</h1>

      <form onSubmit={onFormSubmit}>
        <input
          type="text"
          placeholder="Add Item"
          className="input"
          value={input}
          required
          onChange={onInput}
        />

        <button className="btn" type="submit">
          {" "}
          Add{" "}
        </button>
      </form>
      <br />
      <br />
      <ul>
        {todos.map((todo) => (
          <li className="todo-list">
            <h3> {todo.title} </h3>

            <input
              type="text"
              value={todo.title}
              className="list"
              onChange={(e) => e.preventDefault()}
            />
          </li>
        ))}
      </ul>
    </section>
  );
};

// Render it
ReactDOM.render(
  <Header />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

answered Jan 25, 2022 at 3:54

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ocko Over a year ago

Thank you , it is working , but I dont need set-up id ?

Junius L Over a year ago

you do and also set key for your todos <li key={todo.id} ...

Junius L Over a year ago

reactjs.org/docs/lists-and-keys.html#keys

ocko Over a year ago

I am looking to code , for this output and it does not make sence to me , put h3 element to li element. It should be only {todo.title}

Collectives™ on Stack Overflow

How can I display item in ToDo List

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related