React : Add / Remove components with buttons : Remove not working

Question

I'm trying to get a working remove button for my different categories of things but my remove button only adds just like my add button.

I supposed that's to be expected when using "concat" but I don't know how I'm supposed to be doing this.

I got help for adding here : Add Inputs in React with add button

But how do I delete the last element (perhaps cheking that user has not filled it in beforehand)?

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

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

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

    constructor(props) {
        super(props);
        this.state = { inputCurry: [],
            inputWurst: [],
            inputSausage: [],
            inputPretzel: [],
            Curry: 1,
            Wurst: 1,
            Sausage: 1,
            Pretzel: 1 };
        this.incrementCurry = this.incrementCurry.bind(this);
        this.decrementCurry = this.decrementCurry.bind(this);
        this.incrementWurst = this.incrementWurst.bind(this);
        this.decrementWurst = this.decrementWurst.bind(this);
        this.incrementSausage = this.incrementSausage.bind(this);
        this.decrementSausage = this.decrementSausage.bind(this);
        this.incrementPretzel = this.incrementPretzel.bind(this);
        this.decrementPretzel = this.decrementPretzel.bind(this);
    }

    componentDidMount() {
        this.incrementCurry();
        this.incrementWurst();
        this.incrementSausage();
        this.incrementPretzel();
    }

    incrementCurry() {
        const inputCurry = this.state.inputCurry;
        this.setState({
            Curry: this.state.Curry + 1,
            inputCurry: inputCurry.concat(<InputGroup>
                <Input placeholder="Curry" key={this.state.Curry} /><ProviderInfos /></InputGroup>),
        });
    }

    decrementCurry() {
        const inputCurry = this.state.inputCurry;
        this.setState({
            Curry: this.state.Curry - 1,
            inputCurry: inputCurry.concat(<InputGroup>
                <Input placeholder="Curry" key={this.state.Curry} /><ProviderInfos /></InputGroup>),
        });
    }

    incrementWurst() {
        const inputWurst = this.state.inputWurst;
        this.setState({
            Wurst: this.state.Wurst + 1,
            inputWurst: inputWurst.concat(<InputGroup>
                <Input placeholder="Wurst" key={this.state.Wurst} /><ProviderInfos /></InputGroup>),
        });
    }

    decrementWurst() {
        const inputWurst = this.state.inputWurst;
        this.setState({
            Wurst: this.state.Wurst - 1,
            inputWurst: inputWurst.concat(<InputGroup>
                <Input placeholder="Wurst" key={this.state.Wurst} /><ProviderInfos /></InputGroup>),
        });
    }

    incrementSausage() {
        const inputSausage = this.state.inputSausage;
        this.setState({
            Sausage: this.state.Sausage + 1,
            inputSausage: inputSausage.concat(<InputGroup>
                <Input placeholder="Sausage" key={this.state.Sausage} /><ProviderInfos /></InputGroup>),
        });
    }

    decrementSausage() {
        const inputSausage = this.state.inputSausage;
        this.setState({
            Sausage: this.state.Sausage - 1,
            inputSausage: inputSausage.concat(<InputGroup>
                <Input placeholder="Sausage" key={this.state.Sausage} /><ProviderInfos /></InputGroup>),
        });
    }

    incrementPretzel() {
        const inputPretzel = this.state.inputPretzel;
        this.setState({
            Pretzel: this.state.Pretzel + 1,
            inputPretzel: inputPretzel.concat(<InputGroup>
                <Input placeholder="Pretzel" key={this.state.Pretzel} /><ProviderInfos /></InputGroup>),
        });
    }

    decrementPretzel() {
        const inputPretzel = this.state.inputPretzel;
        this.setState({
            inputPretzel: inputPretzel.deleteElement(this.state.Pretzel),
            Pretzel: this.state.Pretzel - 1,
        });
    }

    render() {
        return (
            <Card>
                <CardBlock className="main-table">
                    <fieldset>
                        <legend>Currys</legend>
                        {this.state.inputCurry}
                        <button onClick={this.incrementCurry}>Ajouter un Curry</button>
                        <button onClick={this.decrementCurry}>Enlever un Curry</button>
                    </fieldset>
                    <fieldset>
                        <legend>Wursts</legend>
                        {this.state.inputWurst}
                        <button onClick={this.incrementWurst}>Ajouter un Wurst</button>
                        <button onClick={this.decrementWurst}>Enlever un Wurst</button>
                    </fieldset>
                    <fieldset>
                        <legend>MasterSausages</legend>
                        {this.state.inputSausage}
                        <button onClick={this.incrementSausage}>Ajouter un Sausage</button>
                        <button onClick={this.decrementSausage}>Enlever un Sausage</button>
                    </fieldset>
                    <fieldset>
                        <legend>Pretzels</legend>
                        {this.state.inputPretzel}
                        <button onClick={this.incrementPretzel}>Ajouter un Pretzel</button>
                        <button onClick={this.decrementPretzel}>Enlever un Pretzel</button>
                    </fieldset>
                    <Button color="secondary">Options</Button>{' '}
                    <Button id="btn">Exécuter</Button>
                </CardBlock>
            </Card>
        );
    }
}

As you can see I tried something new on the fourth element (pretzels) but "deleteElement" is not an accepted function for this object type and I got :

Uncaught TypeError: inputMultiProvider.deleteElement is not a function

In the console.

Answer 1

The issue is with keys

the entire class needs to be reworked top down for any of it to work.

firstly : UUIDs are the only way to go here or you'll loose the key/ the key will be the same across entries.

so first add https://www.npmjs.com/package/uuid to your project

you'll need to add an import wich for some reason noone knows the correct syntax to so here it is it might be usefull to alot of people :

import UUID from 'node-uuid';

then you increments should look like this :

incrementPretzel() {
    const uuid = require('uuid/v1');
    uuid();
    const inputPretzel = this.state.inputPretzel;
    this.setState({
        Cube: uuid,
        inputPretzel: inputPretzel.concat(<InputGroup>
            <Input placeholder="Pretzel" key={uuid} /><ProviderInfos /></InputGroup>),
    });
}

and your decrements like this :

decrementPretzel() {
    this.setState({
        inputPretzel: this.state.inputPretzel.splice(this.state.inputPretzel, this.state.inputPretzel.length - 1),
    });
}

but this doesn't solve the problems of :

• unclean code
• non-refactored code
• html within setState

be warned.