Delete index in a array - React.js

Question

Hello everyone and thank you for your future answers. I've been in trouble for several days, I just want to delete the index of an array that is generated by a form and I can't do it... This is my code : For delete :

handleDelete(index) {
        const recipients = this.state.recipients;
        recipients.splice(index, 1);
        this.setState({recipients: recipients})
       
    }

For push a index and the render :

class SendBookPass extends React.Component {
    constructor(props) {
        super(props);
        this.addNewBeneficiary = this.addNewBeneficiary.bind(this);
        this.toggleBeneficiaryInfos = this.toggleBeneficiaryInfos.bind(this);
        this.state = {
            orderId: "qsdp$az546",
            territory_level: "departement",
            indexForm: 0,
            recipients: [
                {
                    name: "", 
                    firstname: "", 
                    address: "",
                    additionalAddress: "",
                    zip: "",
                    city: "", 
                    numberPassBook: 1,
                }
            ],
            export_mode: {
                verbose:true
             },
            expanded: false,
        };
    }

    addNewBeneficiary() {

      let editedForm = this.state.recipients;

      editedForm.push({
        name: "", 
        firstname: "", 
        address: "",
        additionalAddress: "",
        zip: "",
        city: "", 
        numberPassBook: 1,
      });

      this.setState({
        recipients: editedForm,
        indexForm: editedForm.length - 1,
      });
      console.log("editedForm", editedForm);

    }

    toggleBeneficiaryInfos() {
        this.setState({
            expanded: !this.state.expanded,
        });
    }

    handleUpdate(newForm) {
       
    }

    handleDelete(index) {
        const recipients = this.state.recipients;
        recipients.splice(index, 1);
        this.setState({recipients: recipients})
        console.log(recipients);
       
    }

    handleSubmit() {
     // API 
    };
    
    render() {
    const {
        indexForm,
        recipients
    } = this.state;
    const { t } = this.props;

        return (
            <>
                <div className="sendPass">
                    <h1>{t('SEND_PASS')}</h1>
                    <form 
                        className='sendPassForm'
                        onSubmit={this.handleSubmit()} 
                        >
                        <SendPassFormRender infos={recipients[indexForm]} onUpdate={this.handleUpdate}  />
                        <div className="addBeneficiary" onClick={() => this.addNewBeneficiary()}>
                            <svg  data-name="Layer 1" viewBox="0 0 48 60" x="0px" y="0px" >
                                <path d="M24,5A19,19,0,1,0,43,24,19,19,0,0,0,24,5Zm0,36A17,17,0,1,1,41,24,17,17,0,0,1,24,41Z"/>
                                <polygon points="25 14 23 14 23 23 14 23 14 25 23 25 23 34 25 34 25 25 34 25 34 23 25 23 25 14"/>
                            </svg>
                            <p>{t('ADD_BENEFICIARY')}</p>
                        </div>
                  
                        {console.log("indexform", indexForm)}
                        {indexForm === 0
                        ? ""

                        : recipients.map((infos, index) => 
                      
                        <div key={index} className="listBeneficiary">
                            {console.log("indexform de",infos)}
                            <p>{infos.name}</p>
                            <p>{infos.firstname}</p>
                            <p>{infos.city}</p>
                            
                            <div onClick={this.handleDelete.bind(this, index)}>
                                <svg version="1.1" x="0px" y="0px" viewBox="0 0 100 125"  >
                                    <path d="M77.4,29.4c-1.7,0-3.2,1.4-3.2,3.2v51.4c0,2.5-2.1,4.6-4.6,4.6H30.5c-2.5,0-4.6-2.1-4.6-4.6V32.5c0-1.7-1.4-3.2-3.2-3.2    c-1.7,0-3.2,1.4-3.2,3.2v51.4c0,6,4.9,10.9,10.9,10.9h39.1c6,0,10.9-4.9,10.9-10.9V32.5C80.5,30.8,79.1,29.4,77.4,29.4z"/><path d="M53,78.7v-41c0-1.7-1.3-3.2-3-3.2s-3,1.4-3,3.2v41c0,1.7,1.3,3.2,3,3.2S53,80.5,53,78.7z"/><path d="M40,78.7v-41c0-1.7-1.3-3.2-3-3.2s-3,1.4-3,3.2v41c0,1.7,1.3,3.2,3,3.2S40,80.5,40,78.7z"/>
                                    <path d="M66,78.7v-41c0-1.7-1.3-3.2-3-3.2s-3,1.4-3,3.2v41c0,1.7,1.3,3.2,3,3.2S66,80.5,66,78.7z"/>
                                    <path d="M84.2,17H15.8c-1.7,0-3.2,1.3-3.2,3s1.4,3,3.2,3h68.3c1.7,0,3.2-1.3,3.2-3S85.9,17,84.2,17z"/>
                                    <path d="M40.9,11h18.2c1.7,0,3.2-1.3,3.2-3s-1.4-3-3.2-3H40.9c-1.7,0-3.2,1.3-3.2,3S39.1,11,40.9,11z"/>
                                </svg>
                            </div>
                        <BeneficiaryInfos
                            address={infos.address}
                            additionalAddress={infos.additionalAddress}
                            zip={infos.zip}
                        />
                        </div>
                    )}
                        <input
                            type="submit"
                            value={t('SEND')}
               
                        />
                    </form>
                </div>
            </>
        );
    }
}
 
export default withTranslation('common')(SendBookPass);

For FormRender :

class FormSendPass extends React.Component {
    handleChange = (e, key) => {
        this.props.infos[key] = e.target.value;
        this.props.onUpdate(this.props.infos) 
    };
    componentDidUpdate(prevProps) {
        if (prevProps.infos!== this.props.infos) {
              const name = document.getElementById("name");
              const firstname = document.getElementById("firstname");
              const address = document.getElementById("address");
              const additionalAddress = document.getElementById("additionalAddress");
              const zip = document.getElementById("zip");
              const city = document.getElementById("city");
            
            if(this.props.infos && this.props.infos.name) {
                name.value = this.props.infos.name

            } else {
                name.value = ""
            }

            if(this.props.infos && this.props.infos.firstname === undefined) {
                firstname.value = this.props.infos.firstname

            } else {
                firstname.value = ""
            }

            if(this.props.infos && this.props.infos.address === undefined) {
                address.value = this.props.infos.address

            } else {
                address.value = ""
            }

            if(this.props.infos && this.props.infos.additionalAddress === undefined) {
                additionalAddress.value = this.props.infos.additionalAddress
            } else {
                additionalAddress.value = ""
            }

            if(this.props.infos && this.props.infos.zip === undefined) {
                zip.value = this.props.infos.zip

            } else {
                zip.value = ""
            }

            if(this.props.infos && this.props.infos.city === undefined) {
                city.value = this.props.infos.city

            } else {
                city.value = ""
            }
           
        } else {
            return ""
        }
      } 
    
    render() { 
        const { t } = this.props;
             
        return ( 
            <>
                <div className='userPassForm'>
                    <label>
                        {t('NAME')}*
                        <input
                            id="name"
                            type='text'
                            onChange={e => this.handleChange(e, "name")}
                        />
                    </label>
                    <label>
                        {t('FIRST_NAME')}*
                        <input
                            id="firstname"
                            type='text'
                            onChange={e => this.handleChange(e, "firstname")}
                        />
                    </label>
                </div>
                <div className='addressPassForm'>
                    <label>
                        {t('ADDRESS')}*
                        <input
                            id="address"
                            type='text'
                            onChange={e => this.handleChange(e, "address")}
                        />
                    </label>
                    <label>
                        {t('ADDITIONAL_ADDRESS')}
                        <input
                            id="additionalAddress"
                            type='text'
                            onChange={e => this.handleChange(e, "additionalAddress")}
                        />
                    </label>
                </div>  
                <div className='cityUserPassForm'>
                    <label>
                        {t('ZIP')}*
                        <input
                            id="zip"
                            type='float'
                            onChange={e => this.handleChange(e, "zip")}
                        />
                    </label>
                    <label>
                        {t('CITY')}*
                        <input
                            id="city"
                            type='text'
                            onChange={e => this.handleChange(e, "city")}
                        />
                    </label>
                </div>
                <div className='numberSubmitPassForm'>
                <label>
                    {t('PASS_BOOK')}
                    <input
                        type='number'
                        disabled={true}
                        value='1'
                    />
                </label>
                </div>
                <p>*{t('REQUIRED_FIELDS')}</p>

            </>
         );
    }
}
 
export default (FormSendPass);

I think that the way I push my data into the table is not the right way and that it blocks me from deleting it. Putting empty space is not the solution but I can't figure out how to do it. If anyone has an idea.

Answer 1

Try to use filter method, and compare the indexes, filter all the elements which do not get the passed index argument

handleDelete(index) {
    this.setState({
        recipients: this.state.recipients.filter((x, i) => i !== index
        })
    }