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..

@Andy I didn't add the whole code, just the function where I want to generate a new number to the array — João Silva
– João Silva, Commented Jun 16, 2022 at 16:47
the map function gives you the index as the second argument. So you can do count.map( (item, idx) => .....}). Also you really should call the array "counts" not "count" — terpinmd
– terpinmd, Commented Jun 16, 2022 at 16:49
prevCount => [...prevCount, prevCount + 1] instead of incrementing prevCount (a Number) by 1, you are creating an Array. It's as simple as prevCount=> prevCount + 1 — Nice Books
– Nice Books, Commented Jun 16, 2022 at 17:41

w1am · Accepted Answer · 2022-06-16 17:09:07Z

2

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>
  );
}

edited Jun 16, 2022 at 17:09

answered Jun 16, 2022 at 16:59

w1am

1,2272 gold badges12 silver badges22 bronze badges

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

2 Comments

João Silva Over a year ago

This was EXTREMELY helpful, thank you so much for this perfect reply William.

Jeff Mercado Over a year ago

That syntax looks alarming: todo.map((todo, index + 1) => ...

David · Accepted Answer · 2022-06-16 16:55:45Z

Don't.

There's no reason to track the count of items in an array as its own separate state value.

Arrays have a length property which tells you the count of items in the array.
.map() includes an index in the callback, so if you just want to output the array index then you can do that.
You certainly don't need an array of numbers from 1-X in order to know the numbers from 1 to X. The value of X alone gives you this information.

Remove the count state value entirely, and just output the index of the array from the todo list:

{todo.map((t, x) => (
  <p>
    {x}
    {t}
  </p>
))}

Note also that I abbreviated your inner todo variable to just t. You can call it whatever you like, but giving it the same name as another variable you already have is just asking for confusion and bugs.

You may instead want to rename your array to something plural, like todos. Then each item therein is semantically a todo:

{todos.map((todo, x) => (
  <p>
    {x}
    {todo}
  </p>
))}

Basically, names are important. A variable/type/property/etc. name should tell you exactly and unambiguously what it is. Poor variable names lead to confusing code, and being confused about your code is exactly what brought you here.

Collectives™ on Stack Overflow

Generate a new item in an array in React?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related