Adding incrementing numbers to nested components in react

Boris Grunwald 0
Viewed 20

This is a simplified version of a problem that I'm trying to solve.

I'm rending a list of Wrapper components

function App() {
  return (
    {...map(_ => {
      <Wrapper/>;
    })}
  );
}

The component Wrapper further renders a list (of variable length) of some inputs

const Wrapper =  () => {

  return (
    <div className="">
      {...map(_ => {
        return <input/>
      })}
    </div>
  );
};

Now I need all the inputs to have a data attribute data-inputnumber that increments from 0 and up

this could for example result in the following rendered HTML

<div>
    <input data-inputnumber="0">
    <input data-inputnumber="1">
</div>
<div>
    <input data-inputnumber="2">
    <input data-inputnumber="3">
    <input data-inputnumber="4">
</div>
<div>
    <input data-inputnumber="5">
    <input data-inputnumber="6">
</div>
<div>
    <input data-inputnumber="7">
    <input data-inputnumber="8">
    <input data-inputnumber="9">
    <input data-inputnumber="10">
</div>

Can this be achieved somehow?

reactjs
1 Answers

You can just add a variable in your Wrapper-Component and count up with the ++ - Operator.

const Wrapper =  () => {

let inputCounter = 0;

return (
 <div className="">
  {...map(_ => {
    return <input data-inputnumber={inputCounter++}/>
  })}
</div>
);
};

You don't need to use useState() here. (useState() could actually even trigger an infinite loop)

Dboy0Z0
Related