Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

258
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda