title: Destructuring state/props in React
body: <p>I'm learning React and I have Eslint installed in my project. It started giving me errors like </p>
  
  <pre><code>Use callback in setState when referencing the previous state. (react/no-access-state-in-setstate)
  Must use destructuring state assignment (react/destructuring-assignment)
  </code></pre>
  
  <p>I tried to look this up but couldn't understand properly.</p>
  
  <p>Can someone point me in the right direction with this? </p>
  
  <p>Here is my code that throws the errors:</p>
  
  <pre><code>class LoginForm extends React.Component {
    state = {
      data: {
        email: "",
        password: "",
      },
      loading: false,
      errors: {},
    };
  
    onChange = e =&gt;
      this.setState({
        data: { ...this.state.data, [e.target.name]: e.target.value },
      });
  
    onSubmit = () =&gt; {
      const errors = this.validate(this.state.data);
      this.setState({ errors });
  
      if (Object.keys(errors).length === 0) {
        this.setState({ loading: true });
        this.props
          .submit(this.state.data)
          .catch(err =&gt;
            this.setState({
              errors: err.response.data.errors,
              loading: false,
            }),
          );
      }
    };
  }
  </code></pre>
  
  <p>As I understand I would need to destructure <code>this.state</code> and <code>this.props</code> but how?</p>
  
  <p>EDIT:
  After following the suggestions below, I ended up with this. All I need to fix right now is the props. Its asking me to use a destructuring props assignment.</p>
  
  <pre><code>onChange = ({ target: { name, value } }) =&gt;
      this.setState(prevState =&gt; ({
          data: { ...prevState.data, [name]: value }
      }));
  
  onSubmit = () =&gt; {
      const { data } = this.state;
      const errors = this.validate(data);
      this.setState({ errors });
  
      if (Object.keys(errors).length === 0) {
          this.setState({ loading: true });
          this.props
              .submit(data)
              .catch(err =&gt;
                  this.setState({ errors: err.response.data.errors, loading: false })
              );
      }
  };
  </code></pre>
  
  <p>Thanks in advance and sorry for the newbie question.</p>