Как избавиться от прописывания name большому количеству input

Question

У меня есть такой кусочек кода (InputCase - компонент для input)

<InputCase name='input24' value={inputValues.input} onChange={onChangeHandler} />
        <InputCase name='input25' disabled />
        <InputCase name='input26' value={inputValues.input} onChange={onChangeHandler} />
        <InputCase name='input27' disabled />
        <InputCase name='input28' value={inputValues.input} onChange={onChangeHandler} />
        <InputCase name='input29' disabled />
        <InputCase name='input30' value={inputValues.input} onChange={onChangeHandler} />
        <InputCase name='input31' disabled />
        <InputCase name='input32' value={inputValues.input} onChange={onChangeHandler} />

Есть ли какой-нибудь более правильный подход для написания уникального имени каждому input'у? Так как задавать 70-ти полям разные имена - такое себе удовольствие :)

Answer 1

Не поленился написал 2 варианта) Со статическими и динамическими полями.

const fields = {
  fio: {
    name: 'fio',
    value: 'sss',
    error: ''
  },
  email : {
    name: 'email',
    value: 'fdf',
    error: ''
  }
}

const GetInputFields = (props) => {
  let fields = [];
  for (let i = 0; i < props.countFields; i++) {
    fields.push(
      <input key={'input' + i} name={'input' + i} value={'df'}/>
    );
  }
  return (fields);
}


export default function App() {
  return (
    <div className="App">

   {Object.keys(fields).map(fieldName => {
        return (
          <input key={fields[fieldName].name} name={fields[fieldName].name} value={fields[fieldName].value}/>
        )
      })
   }

   <GetInputFields countFields={10}/>

    </div>
  );
}

БЛОГ НА HUSL

Как избавиться от прописывания name большому количеству input

Ответы (1 шт):