CODEWITHSUNDEEP
reactjs
user10297590
user10297590

Reputation: 25

Update immediately after delete data

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

  componentDidMount() {
    axios.get(`http://localhost:3000/employees`)
    .then(res => {
      const users = res.data;
      this.setState({ users });

    })
  }

  render(){
    return(
      <div>
        <Main users= {this.state.users}/>
        <Form/>
      </div>
    );
  }
}

class Main extends Component{
  state = {
    id: ''
  }

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

  handleSubmit = event => {
    event.preventDefault();

    axios.delete(`http://localhost:3000/employees/${this.state.id}`)
    .then(res => {
      console.log(res);
      console.log("this is" + res.data);
    })
  }

  render(){
    return(
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person Name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

Can someone tell me why after the Axios delete request, how I can render the new state in the users array from App component?

In the App component, I am trying to make this.state.users as a props to send it to the Form component. My guess is put this.setState({users: res.data}). The delete request is fine with 200, but I need to refresh the page to get the new result. How can I update immediatly?

// this is a json object
"employees": [
{
  "id": 8,
  "first_name": "Lteve",
  "last_name": "Palmer",
  "email": "[email protected]"
},

Upvotes: 0

Views: 2305

Answers (1)

Patrick
Patrick

Reputation: 17973

As Dave mentions in a comment you want to have single responsibility for state between components.

This topic is also discussed in the blog post You Probably Don't Need Derived State, where one solution to your problem is to have Main "report back" to App in order to update state. So either App passes down a onDeleteUser function, or a callback for when a user is removed, such as onUserWasDeleted.

The latter can be done with the least amount of changes to your code I suppose.

class App extends Component {
  constructor(props) {
    super(props);
    this.onUserWasDeleted = this.onUserWasDeleted.bind(this);
  }

  onUserWasDeleted(userId) {
    // remove user that was successfully removed
    this.setState({ users: this.state.users.filter(user => user.id !== userId) });
  }

  render() {
    return (
      <Main
        users={this.state.users}
        // pass down a callback to Main
        onUserDeleted={this.onUserWasDeleted}
      />
    );
  }
}

class Main extends Component {
  handleSubmit = event => {
    event.preventDefault();
    axios.delete(`http://localhost:3000/employees/${this.state.id}`)
    .then(res => {
      console.log(res);
      console.log("this is" + res.data);
      // call our callback function in App
      this.props.onUserWasDeleted(this.state.id);
    })
  }
}

Upvotes: 1

Related Questions