Manage Input inside a List in React - reactjs

Question

I call a GET from a server and this request return an array of N objects. Then on this array I generate a List using Antd in this way:
render() {
return (
<List
dataSource={this.props.images}
renderItem={image => (
<List.Item actions={
[
<Icon key={"1"+image.Id.toString()} onClick={(e) => this.actionClick('RUN',image.Id, image.RepoTags[0].replace(/[^a-zA-Z0-9]/g,'_'), e)}
className="icon" type="caret-right" />,
<Popconfirm placement="topRight" title="Are you sure delete this image?"
onConfirm={(e) => this.actionClick('REMOVE_IMAGE',image.Id, e)} okText="Yes" cancelText="No">
<Icon key="4" className="icon" type="close" />
</Popconfirm>
]
}>
<List.Item.Meta
title={image.RepoTags[0]}
description={image.Labels ? image.Labels.maintainer : ''}
</List.Item.Meta>
<InputGroup compact className={'inputGroup'}>
<Input style={{ width: '50%' }} placeholder={'inner port'} value={this.state.innerPort} onChange={evt => this.updateValue("innerPort",evt)}/>
<Input style={{ width: '50%' }} placeholder={'redirect'} value={this.state.redirectPort} onChange={evt => this.updateValue("redirectPort",evt)}/>
</InputGroup>
</List.Item>
)}
>
</List>
);
}
As you can see in the code I have an InputGroup for every List.Item and I store the value in the state using:
updateValue(k,v) {
console.log("key", k, "value", v);
console.log(this.state);
this.setState({
[k]:v.target.value
});
}
The problem here is that the I have the same value for every List.Item of the List.
How could I manage this problem with multiple List.Item? I thought of an array, but I didn't make that work.

Answer 1

Change your Input to
<Input style={{ width: '50%' }} placeholder={'inner port'} value={this.state["innerPort"+image.id] } onChange={evt => this.updateValue("innerPort",image.Id,evt)}/>
this will send a unique identifier to the update function and then you can use it like
updateValue(k,id,v) {
console.log("key", k, "value", v);
console.log(this.state);
var myKey=k+id
this.setState({
[myKey]:v.target.value
});
}

Answer 2

Have you tried to use FlatList instead of List, so you can pass the item index to the rendered item.