Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

256
Views
Generate a new item in an array in React?

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

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Don't.

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

  1. Arrays have a length property which tells you the count of items in the array.
  2. .map() includes an index in the callback, so if you just want to output the array index then you can do that.
  3. 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.

about 4 years ago · Juan Pablo Isaza Report

0

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>
  );
}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!