How to display loading info based on clicked delete button in reactjs-CodePudding

The code below is working fine by deleting record.

Now Am trying to display text Loading. deleting in progress... only for that particular button being clicked.

Here is my issue, when I click on a single record button, i can see the text Loading. deleting in progress... displayed in all the record instead of showing for that single particular button i clicked.

I have tried using id to indicated the clicked row button but cannot get it to work as per below I set this withing the handleDeleteRow() function

this.setState({loading_id: false});
this.setState({loading_id: true});

I set this at render

{loading_person.id && <span>Loading. deleting in progress...</span>}

here is the code

import React from "react";
import { render } from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      
    };
  }

  componentDidMount() {
    this.setState({
      data: [
        { id: "1", name: "user 1" },
        { id: "2", name: "user 2"},
        { id: "3", name: "user 3"}
      ]
    });

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



handleDeleteRow = (id) => {
    this.setState({loading: true});
alert(id);
    let data = [...this.state.data];
    data.splice(id, 1);
    this.setState({ 
      data: data
    });
    this.setState({loading: false});
  }




  render() {

const {loading} = this.state;
    return (
      <span>
        <label>
          <ul>
            {this.state.data.map(person => (
              <li key={person.id}>
                {person.name}
                <br />

<button onClick={() => this.handleDeleteRow(person.id)} style={{color:'red'}}>Delete</button>
{loading && <span>Loading. deleting in progress...</span>}
              </li>
            ))}
          </ul>
        </label>
      </span>
    );
  }
}


export default App;

CodePudding user response：

Just Toggle Button with loading spinner like this

{!loading?<button onClick={() => this.handleDeleteRow(person.id)} style={{color:'red'}}>Delete</button>
: <span>Loading. deleting in progress...</span>}

CodePudding user response：

You can store id of the object being deleted and enable loading indicator based on stored id. Instead of this.setState({loading: true}), use this in handleDeleteRow:

this.setState({deletedId: id});

And in render:

{this.state.deletedId===person.id && Loading. deleting in progress...