Add Inputs in React with add button

Question

I'm trying to make a set of inputs that can be duplicated or removed.

I've found and used a combination of this : https://jsfiddle.net/69z2wepo/36745/ and this (because the code above does not handle removal) : https://codepen.io/lichin-lin/pen/MKMezg

I may not need to point at a specific input since in my interface you should always only be adding a new one if the one before is filled (i'll set up the condition later) and therefore only deleting the last. So I'm fine with a simple counter as a solution to all this (though I'll need 3-4 counters for the different input types).

/* ************************************* */
/* ********       IMPORTS       ******** */
/* ************************************* */
import React, { Component } from 'react';
import { Card, CardBlock, Button, InputGroup, Input } from 'reactstrap';
import ProviderInfos from '../ProviderInfos/ProviderInfos';

/* ************************************* */
/* ********      VARIABLES      ******** */
/* ************************************* */

const count = 0;

/* ************************************* */
/* ********      COMPONENT      ******** */
/* ************************************* */
export default class SearchExtendedComponent extends Component {

    constructor(props) {
        super(props);
        this.state = { inputList: [] };
        this.incrementCount = this.incrementCount.bind(this);
        this.decrementCount = this.decrementCount.bind(this);
    }

    incrementCount() {
      const inputList = this.state.inputList;
        this.setState({
            count: this.state.count + 1,
            inputList: inputList.concat(<Input key={count} />),
        });
    }
    decrementCount() {
      const inputList = this.state.inputList;
        this.setState({
            count: this.state.count - 1,
            inputList: inputList.concat(<Input key={count} />),
        });
    }
    render() {
        return (
            <Card>
                <CardBlock className="main-table">
                    <InputGroup>
                        <Input placeholder="Type1" />
                        <ProviderInfos />
                    </InputGroup>
                    {/* THE IDEA IS TO HAVE AN ADD AND REMOVE BUTTON FOR EACH TYPE */}
                    <InputGroup className="add-more">
                        <button onClick={this.incrementCount}>Add input</button>
                        {this.state.inputList}
                    </InputGroup>
                    <InputGroup>
                        <Input placeholder="Type2" />
                        <ProviderInfos />
                    </InputGroup>
                    <InputGroup>
                        <Input placeholder="Type3" />
                        <ProviderInfos />
                    </InputGroup>
                    <Button color="secondary">Options</Button>{' '}
                    <Button id="btn">Exécuter</Button>
                </CardBlock>
            </Card>
        );
    }
}

I get an error in the console :

Warning: flattenChildren(...): Encountered two children with the same key, `1:$0`. Child keys must be unique; when two children share a key, only the first child will be used.

and this seems fitting with what occurs :

Only the first new input is added after that the "add" button ceases to work.

As you can see I'm currently declaring the input within the functions ( or at least it seems to me like I am... Is that not what const inputList = this.state.inputList; does?) and I think that's the issue I should be declaring it next to "count" IMO but my attempts to do that :

const inputList = this.state.inputList;

const propTypes = { inputList: React.PropTypes.inputList, };

have resulted in the app not loading at all : "Cannot read property 'state' of undefined".

Not only that but that doesn't seem like clean refactored code to me since I'm doing it twice and keep in mind I'm going to have to duplicate this code even more since both the add and delete functions (and buttons) will have to be there for three to four different input types down the line.

UPDATE : moved the remove button part to another question : React : Add / Remove components with buttons : Remove not working

add count in the initial state. this.state = { inputList: [] , count :0}; remove the const count = 0; line — abdul
– abdul, Commented Aug 7, 2017 at 9:45
@abdul is the initial state a default function of sorts that I4m supposed to add? I don't see it in my own code. — tatsu
– tatsu, Commented Aug 7, 2017 at 9:50
you're setting the initial state of your component just below this line super(props) inside your constructor. just add count : 0 to it like this.state = { inputList: [] , count :0}; — abdul
– abdul, Commented Aug 7, 2017 at 9:53
@abdul ok but with const count = 0; removed I get Uncaught ReferenceError: count is not defined — tatsu
– tatsu, Commented Aug 7, 2017 at 9:55
I think you're getting that b/c you're using in <Input key={count} /> change this also to <Input key={this.state.count} /> — abdul
– abdul, Commented Aug 7, 2017 at 9:58

abdul · Accepted Answer · 2017-08-07 10:07:05Z

2

add count in the initial state.

this.state = { inputList: [] , count :0};

Then remove this line const count = 0;

Since you're using count as your key change this also to.

<Input key={this.state.count} />

I made a jssfiddle for another question, the concept is similar so it might be helpful.

answered Aug 7, 2017 at 10:07

abdul

1,5811 gold badge14 silver badges32 bronze badges

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

8 Comments

abdul Over a year ago

I don't see any button that calls the decrement method. add this ` <InputGroup className="remove"> <button onClick={this.decrementCount}>Add input</button> {this.state.inputList} </InputGroup>`

tatsu Over a year ago

thanks! could you explain how a refactored version of this with say 4 different cards would look?

tatsu Over a year ago

I had added the button already but it doesn't trigger. why do you add a second {this.state.inputList}

abdul Over a year ago

ohh that's by mistake, if you've the button it should work as expected.

abdul Over a year ago

ideally, you could have a different list and count for each input type. Also a different handler(increment and decrement) for each input type that increments the corresponding input type count.

|

Atty · Accepted Answer · 2017-08-07 09:50:36Z

2

The key that is passed in <Input key={count} /> should be unique. You shouldn't have two items in the list with the same key value.

In your case, when you do 2 subsequent increment and decrement, you end up with same count value. That means same key repeated for different <Input/> tag

console.log the count to check if its unique. The key 0 is used twice in the array, that's what the error means.

edited Aug 7, 2017 at 9:50

answered Aug 7, 2017 at 9:45

Atty

8111 gold badge15 silver badges21 bronze badges

6 Comments

tatsu Over a year ago

ok. but how do I not give 0 to the "key" whatever that is. I feel like I've done nothing to make that happen? count should be this.state.count + 1, .... 0+1 =1 and so on....

Atty Over a year ago

dont use count at all in input tag. Initialise another variable and keep incrementing it in case of both increment and decrement

tatsu Over a year ago

ok thanks but I can't jsut put inputList: inputList, at some point I have to in some desciption tell inputList to "+1" do I not? what does that look like? I really am a beginner in react.

Atty Over a year ago

If you really need the count, then use it as another parameter. So your tag could look like <Input key={some_unique_key} count={count}/>

tatsu Over a year ago

thanks! abdul suggested something similar and it worked :)

|

Prakash Sharma · Accepted Answer · 2017-08-07 09:59:46Z

2

Remove const count and initialize a count variable in state.

constructor(props) {
        super(props);
        this.state = { inputList: [], count: 0 };
        this.incrementCount = this.incrementCount.bind(this);
        this.decrementCount = this.decrementCount.bind(this);
    }

Then use this.state.count as key in input element:

incrementCount() {
      const inputList = this.state.inputList;
        this.setState({
            count: this.state.count + 1,
            inputList: inputList.concat(<Input key={this.state.count} />),
        });
    }
    decrementCount() {
      const inputList = this.state.inputList;
        this.setState({
            count: this.state.count - 1,
            inputList: inputList.concat(<Input key={this.state.count} />),
        });
    }

answered Aug 7, 2017 at 9:59

Prakash Sharma

16.7k6 gold badges34 silver badges38 bronze badges

1 Comment

tatsu Over a year ago

the decrement method does not work for me. I get : warning.js:36 Warning: flattenChildren(...): Encountered two children with the same key, 0:$0. Child keys must be unique; when two children share a key, only the first child will be used and the "remove" button makes the list of inputs bigger by one and then stops doing anything.

Collectives™ on Stack Overflow

Add Inputs in React with add button

3 Answers 3

8 Comments

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related