Remove Item on click in React

Question

I have a names list which contains 3 names. On clicking any 1, you can edit and save. That value updates to the list. Now I can add how many ever names I want but I am not able to delete/remove any.

This is how it looks in the beginning

On clicking a name (the whole container) it looks like this

I am able to add the new name back to the div like this

And I can add as many as I want, like this like this

Now I want to be able to click on the cross icon and remove the whole element I want. It should go be gone from the page. The other elements should take its place from top to bottom. Remove/delete functionality should be on input and the div with names in it.

Names Component (Names are extracted from this to the one below)

import Sukhdev from '../../../src/components/sukhdev';
import React from 'react';

export default { title: 'Sukhdev' };

const names = [{
    firstName: "Mahatma",
    lastName: "Gandhi"
}, {
    firstName: "Shivaji",
    lastName: "Maharaj"
}, {
    firstName: "Bhagat",
    lastName: "Singh"
},
]

export const sukhdev = () => {
    return(
    <Sukhdev names={names}/>
    ) 
}

Parent Component

import React, { Component } from 'react';
import FirstName from './firstName';
import LastName from './lastName';
import TextArea from './textArea'
import styles from './styles';


export default class Sukhdev extends Component {
  constructor(props) {
    super(props);
      const {names} = this.props;
      const updatedNames = names.map((name) => ({...name, ...{isEditable: false}})); 
      this.state = {
        userNames: updatedNames
      }
  }

 inputNamesHandler = (namesIndex) => {
    const updatedUserNameDetails = [...this.state.userNames];
    updatedUserNameDetails[namesIndex].isEditable = true;
    this.setState({userNames: updatedUserNameDetails})
  }

  saveButton = (inputValue, index) => {
    const {userNames} = this.state; 
    const newNames = [...userNames];
    newNames[index] = {...newNames[index], isEditable: false, firstName: inputValue, lastName: ''};
    this.setState({
      userNames: newNames
    })
  }

  addChild = () => {
    const createInputs = [...this.state.userNames];
    createInputs.push({firstName: '', lastName: '', isEditable: true});
    this.setState({
      userNames: createInputs
    })
  }

   ------> // This is where the changes need to be made
  deleteRow = (index) => {
    const postDelete = [...this.state.userNames];
    postDelete.slice(index, 1);
    this.setState({
      userNames: postDelete
    })
  }

  render() {
      return <div>
          <h1>Names</h1>
          <button onClick={this.addChild} style={styles.button}>Add New</button>
          <div>
              {this.state.userNames.map((nameDetails, index) => {
                  if(nameDetails.isEditable) {
                    return <div>
                      <TextArea clicked={(name) => this.saveButton(name, index)}/>
                      </div>;
                  } else {
                    return <div style={styles.namesContainer}>
                    <div onClick={() => this.inputNamesHandler(index)} style={styles.innerContainerComponent}>
                    <div style={styles.firstMargin}><FirstName firstName={nameDetails.firstName}></FirstName></div>
                    <div><LastName lastName={nameDetails.lastName}></LastName></div>
                    </div>
                    <img src={require('../../images/cancel.png')} style={styles.crossBtn} onClick={() => this.deleteRow(index)} />
                    </div>
                  }
              })}   
          </div> 
          </div>     
    }
}

Textarea/Input Component

import React, { Component } from "react";
import styles from './styles'

export default class TextArea extends Component {
    constructor(props) {
        super(props);
        this.state = {value:''}

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
    }

    render() {
        return (
            <div>
                <div style={styles.inputContainer}>
                <input type="text" style={styles.textField} value={this.state.value} onChange={this.handleChange}></input>
                <button type="submit" style={styles.saveButton} onClick={() => this.props.clicked(this.state.value)}>Save</button>
                <img src={require('../../images/cancel.png')} style={styles.crossBtn} />
                </div>
            </div>
        )

    }
}

First name and last name are imported by parent component in this way

import React, {Component} from 'react';

export default class FirstName extends Component {
    render() {
        return <div>{this.props.firstName}</div>
    }
}

Last name is also like the code given above.

Answer 1

slice does not modify the original array, but returns a new array with the modified values. You need to assign it to a new variable or use a different method of deleting the value.

let newArray = postDelete.slice(index, index + 1);
this.setState({
  userNames: newArray
})

In fact, since slice does not mutate the array, you could simplify to this:

this.setState((prevState) => ({
  userNames: prevState.userNames.slice(index, index + 1)
)})

However, to accomplish this specific task, you should use a different method like filter

this.setState((prevState) => ({
  userNames: prevState.userNames.filter((v,i) => i != index)
)})

This will iterate through the array and filter out all that don't meet the condition. The first argument is the current value and the second is the index. So we only want to keep the values that do not match our index variable.

Answer 2

class App extends React.Component {
  state = {
    users: [
      {
        firstName: "Lionel",
        lastName: "Messi"
      },
      {
        firstName: "Cristiano",
        lastName: "Ronaldo"
      },
      {
        firstName: "Neymar",
        lastName: "Jr."
      },
      {
        firstName: "Zlatan",
        lastName: "Ibrahimovic"
      },
      {
        firstName: "Ricardo",
        lastName: "Kaka"
      }
    ]
  };

  updateUsers = (updatedUser, index) => {
    var users = [...this.state.users];
    users[index] = updatedUser;
    this.setState({
      users
    });
  };

  deleteUser = index => {
    var users = [...this.state.users];
    users.splice(index, 1);
    this.setState({
      users
    });
  };

  render() {
    return (
      <div>
        {this.state.users.map((user, index) => {
          return (
            <PlayerBox
              user={user}
              key={Math.random()}
              index={index}
              updateUsers={this.updateUsers}
              deleteUser={this.deleteUser}
            />
          );
        })}
        <h1> {JSON.stringify(this.state.users)} </h1>
      </div>
    );
  }
}

class PlayerBox extends React.Component {
  state = {
    editMode: false,
    firstName: "",
    lastName: ""
  };

  componentDidMount() {
    const { firstName, lastName } = this.props.user;
    this.setState({
      firstName,
      lastName
    });
  }

  updateParent = () => {
    const { index, updateUsers } = this.props;
    updateUsers(
      {
        firstName: this.state.firstName,
        lastName: this.state.lastName
      },
      index
    );
    this.setState({
      editMode: false
    });
  };

  deleteUser = () => {
    const { deleteUser, index } = this.props;
    this.setState({
      editMode: false
    });
    deleteUser(index);
  };

  render() {
    const { firstName, lastName } = this.props.user;
    return this.state.editMode ? (
      <div>
        <div>
          <input
            type="text"
            value={this.state.firstName}
            onChange={e =>
              this.setState({
                firstName: e.target.value
              })
            }
          />
          <input
            type="text"
            value={this.state.lastName}
            onChange={e =>
              this.setState({
                lastName: e.target.value
              })
            }
          />
          <button type="submit" onClick={this.updateParent}>
            Save
          </button>
          <button onClick={this.deleteUser}> Delete </button>
        </div>
      </div>
    ) : (
      <div
        onClick={() =>
          this.setState({
            editMode: true
          })
        }
      >
        {firstName} {lastName}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>