Как работать с инпутами, которые мапятся

Есть такой компонент, который мэпит объект.

function Tbody({goods}) {

const [amount, setAmount] = useState("")
const [id, setId] = useState("")

const handleAmount = (e) => {
    setAmount(e.target.value)
}

const handleId = (id) => {
    setId(id)
}

return (
    <tbody>
    {goods.map(item => {
        return (
            <tr>
                <td>{item.gid}</td>
                <td>{item.gname}</td>
                <td>{item.gprice}</td>
                <td><input type={"text"} name={item.gname} onChange={handleAmount}/></td>
                <td></td>
            </tr>
        )
    })}
    </tbody>
);

}

Передал стейт amount в пустой td, но он передается и в остальные инпуты, что логично, ведь у меня он мепится. Как мне указать, что я пишу в этот инпут + чтобы при вводе в другой инпут, предыдущий стейт не исчезал

export default Tbody;введите сюда описание изображения


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

Автор решения: Aleksey D

На данный момент состояние amount является общим для таблицы. Как вариант сделать отдельный компонент TableRow где на каждую строку будет свое состояние, и там же прокидуется ивент.

→ Ссылка