React / Генератор input

Question

У меня есть функция генерирующая input:

 const [addInput, setAddInput] = useState([]); 

 const exampleInput = (value) => {
    setAddInput([
        ...addInput,
        <input key={inputUuid}
               type='text'
               className='input'
               name={inputUuid}
               value={value}
        />
    ])
};

inputUuid - некое уникальное значение.

Используется она в функции, которая срабатывает по onClick:

function expamle(arrExample) {
    arrExample.forEach(item => {
        exampleInput(item);
    });
}

в arrExample приходит массив строк, например ['12', '1234', и т.д.]

Рисуются input:

<div>
    {addInput.map(item => item)}
</div>

Но рисуется только 1 input с передаваемыми данными. Просьба подсказать, что я делаю не так.

Answer 1

Так проще

const [addInput, setAddInput] = useState([]);
//arrExample === ['12', '1234', и т.д.]
function expamle(arrExample) {
    setAddInput(previous=>[...previous, ...arrExample]);
}
return <>
        {addInput.map(value =>
               <input key={inputUuid}
               type='text'
               className='input'
               name={inputUuid}
               value={value}/>
        )}
       </>

А твоя функция не работает потому, что setAddInput работает асинхронно, а forEach синхронно. forEach всю обойму выстрелит, пока первый setAddInput только разогреваеться. Поэтому addInput будет [] в forEach

БЛОГ НА HUSL

React / Генератор input

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