Witam, mam state który przechowuje tablice obiektów. Obiekt przechowuje id, value jednego inputa (require) i value drugiego.
Za pomocą .map renderuję dwa kontrolowane inputy i problem jest w tym, że jak pisze coś w tym inpucie, to tracę na nim focus ponieważ inputy renderują się na nowo i nie wiem jak rozwiązać ten problem. Próbowałem zrobić drugą tablice i na niej uzywać .map a dane pobierać z innego state'u ale to nie pomogło.
const Other = ({data, setData}) => {
const [requiremants, setRequiremants] = useState([]);
const [inputArr, setInputArr] = useState([]);
const addInput = () =>{
const id = uuidv4();
setRequiremants([...requiremants, {id: id, require: "", cost: 0}]);
setInputArr([...inputArr, id]);
}
const handleInput = (e, id, key) =>{
setRequiremants(
requiremants.map(requiremant => {
if(requiremant.id === id)
return {...requiremant, [key]: e.target.value}
return requiremant
})
)
}
return (
<section>
<h1>Inne oczekiwania</h1>
{
inputArr.map(inputId => {
let requiremant;
for(let i = 0; i < requiremants.length; i++){
if(inputId === requiremants[i].id){
requiremant = requiremants[i];
}
}
return (
<div key = {uuidv4()}>
<label>
Inne oczekiwania klienta:
<input type = "text" value = {requiremant.require} onChange = {e => handleInput(e,requiremant.id, "require")} />
</label>
<label>
Wycena indywidualna:
<input type = "number" value = {requiremant.cost} onChange = {e => handleInput(e,requiremant.id, "cost")} />
</label>
</ div>
)
})
}
<button type="button" class="btn btn-primary" onClick = {addInput}>Dodaj oczekiwanie</button>
</section>
)
}