Resolved: Generate a new item in an array in React?

Question:

I’m building a to-do list and I want each list item to have a number, starting from 1. I’m using the useState hook on the counter but I can’t figure out how to add new items to the array every time I click on a button. I haven’t coded in months and I’m really rusty.

function Product() {
  const [input, setInput] = useState("");
  const [todo, setTodo] = useState([]);
  const [count, setCount] = useState([]);

  const addTodo = e => {
    e.preventDefault();

    setTodo([...todo, input]);
    setCount(prevCount => [...prevCount, prevCount + 1]);

    setInput("");
  };

  return (
    <div>
      <form>
        <input value={input} onChange={e => setInput(e.target.value)} type='text' />
        <button type='submit' onClick={addTodo}>
          Add!
        </button>
      </form>

      <h2 style={{ marginBottom: "0.5rem" }}>List of To-dos !</h2>

      {todo.map(todo => (
        <p>
          {count.map(count => (
            <p>{count}</p>
          ))}
          {todo}
        </p>
      ))}
    </div>
  );
}

I want to make it so each time I add a list item, it adds its number to the left. The first item would have 1, the second 2, etc..

Answer:

This is really bad practice:
What you want to do is use the index param that Javascript map function gives you:
Good practice

todo.map((todo, index) => (
    <p>{index} - {todo}</p>
))

Output

0 - walk dog
1 - do yoga

Now if want the index to start at 1, you can simply add +1 to index

todo.map((todo, index + 1) => (
    <p>{index} - {todo}</p>
))

Output

1 - walk dog
2 - do yoga

Since the index values are unique, you could use that to your benefit when performing other actions such as deleting etc. Usually you add the key attribute to the individual child values according to the official React documentation as follows

todo.map((todo, index + 1) => (
    <p key={index + 1}>{index} - {todo}</p>
))

where key is a unique value.
Also, change your variable names to something more meaningful. I’d suggest changing todo to plurial todos.
Your final code should look like this:

function Product() {
  const [input, setInput] = useState("");
  const [todo, setTodo] = useState([]);

  const addTodo = e => {
    e.preventDefault();

    setTodo([...todo, input]);

    setInput("");
  };

  return (
    <div>
      <form>
        <input value={input} onChange={e => setInput(e.target.value)} type='text' />
        <button type='submit' onClick={addTodo}>
          Add!
        </button>
      </form>

      <h2 style={{ marginBottom: "0.5rem" }}>List of To-dos !</h2>

      {todo.map((count, index + 1) => (
          <p key={index + 1}>{index} {todo}</p>
      ))}
    </div>
  );
}

If you have better answer, please add a comment about this, thank you!

Resolved: Generate a new item in an array in React?

Resolved: How to get Union type from an array of objects in Flow?

Resolved: Modify entity using Action in C#

Resolved: How to give rank on datetime column group by another column with userid in it

Leave A Reply