Manage Input inside a List in React

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.

supra28 · Accepted Answer · 2018-05-24 09:40:08Z

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
        });
    }

edited May 24, 2018 at 9:40

answered May 24, 2018 at 9:30

supra28

1,64610 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mitro Over a year ago

That's probably a good solution, and I already thought about it, but the problem is now with value={this.state.innerPort} I changed to value={this.state.Image.Id.innerPort}, but it's wrong since I get undefined. How it should be?

daniele andreoli · Accepted Answer · 2018-05-24 09:23:58Z

1

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

answered May 24, 2018 at 9:23

daniele andreoli

511 silver badge7 bronze badges

Collectives™ on Stack Overflow

Manage Input inside a List in React

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related