Clear a text input whenever a checkbox is checked in reactjs

Question

I have multiple text input fields and a single checkbox. Whenever I check the checkbox, I want to clear one of my text input fields. I looked at various answers for this, however, none of them worked.

Here is my code:

import React, { Component } from 'react';

class Form extends Component {
    state = {}

    constructor(props) {
        super(props);
        this.state = {
            text1: "",
            text2: ""
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleClear = this.handleClear.bind(this);
      }

      handleChange(event) {
        let name = event.target.name;
        let value = event.target.value;
        this.setState({[name]: value});
      }

      handleClear(event){
        let checked = event.target.checked;
        if(checked){
            this.setState({"text2": ''}); // did not work
            // how to do it???
            console.log(this.state)
        }
      }

    render() { 
        return (
            <form>
                <input type="text" name="text1" onChange={this.handleChange}/>
                <input type="text" name="text2" onChange={this.handleChange}/>
                <input type="checkbox" name="clear-text2" onChange={this.handleClear}/>
            </form>
        );
    }
}
 
export default Form;

In this code, I want the field text2 to get cleared when the checkbox is checked.

setState is asynchronous so you can't see if the state was changed immediately after the change. — D10S
– D10S, Commented Jul 5, 2020 at 12:19
@D10S So, how to do it instantly?. But even after changing the state, input is not getting cleared! What am I missing? — Phenomenal One
– Phenomenal One, Commented Jul 5, 2020 at 12:31

HMR · Accepted Answer · 2020-07-05 13:39:06Z

4

Your text inputs are not controlled components, they have an onChange but you did not set a value property:

class Form extends React.Component {
  state = {};

  constructor(props) {
    super(props);
    this.state = {
      text1: '',
      text2: '',
    };
    //remove bind, using arrow functions will bind
  }

  handleChange = (event) => {//arrow function
    let name = event.target.name;
    let value = event.target.value;
    this.setState({ [name]: value });
  };

  handleClear = (event) => {//arrow function
    let checked = event.target.checked;
    if (checked) {
      this.setState({ text2: '' }, () =>
        //log in the setState callback gets the current state
        //  you do not want to nest this too much, you already
        //  know the state because you just set it so there is
        //  usually no need for this
        console.log('works:', this.state)
      );

      console.log('does not work', this.state);
    }
  };

  render() {
    return (
      <form>
        <input
          type="text"
          name="text1"
          value={this.state.text1}
          onChange={this.handleChange}
        />
        <input
          type="text"
          name="text2"
          // added value property to text2
          value={this.state.text2}
          onChange={this.handleChange}
        />
        <input
          type="checkbox"
          name="clear-text2"
          onChange={this.handleClear}
        />
      </form>
    );
  }
}

ReactDOM.render(<Form />, document.getElementById('root'));

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

here is a functional component example:

const Form = () => {
  //using useState to set state
  const [state, setState] = React.useState({
    text1: '',
    text2: '',
  });
  //using useCallback for event handlers
  const handleChange = React.useCallback((event) => {
    let name = event.target.name;
    let value = event.target.value;
    //pass callback to setState to get current state
    //  and copying state to new state
    setState((state) => ({ ...state, [name]: value }));
  }, []);

  const handleClear = React.useCallback((event) => {
    let checked = event.target.checked;
    if (checked) {
      setState((state) => {
        const newState = { ...state, text2: '' };
        console.log('works', newState);
        return newState;
      });
      //logging a stale closure will not work
      //  and only creates needless dependency
      // console.log('does not work', state);
    }
  }, []);
  //no this in jsx
  return (
    <form>
      <input
        type="text"
        name="text1"
        onChange={handleChange}
      />
      <input
        type="text"
        name="text2"
        // added value property to text2
        value={state.text2}
        onChange={handleChange}
      />
      <input
        type="checkbox"
        name="clear-text2"
        onChange={handleClear}
      />
    </form>
  );
};

ReactDOM.render(<Form />, document.getElementById('root'));

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

edited Jul 5, 2020 at 13:39

answered Jul 5, 2020 at 12:51

HMR

39.5k26 gold badges99 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Momin Over a year ago

Could you share the same problem doing functional components using hooks!

HMR Over a year ago

@Momin Added functional component example.

Momin Over a year ago

Thanks! Suppose I only want to apply functional components for my whole projects, is it possible, or is it a right approach?

HMR Over a year ago

@Momin Yes, it's fine to only use functional components in react applications.

HMR Over a year ago

@Momin this redux book is a bit old as it still uses connect but does explain redux quite well. And read the react guide.

|

ezio4df · Accepted Answer · 2020-07-05 14:41:43Z

3

Try this somthing like this,

<input type="text" name="text1" onChange={this.handleChange} value={this.state.text1} />
<input type="text" name="text2" onChange={this.handleChange} value={this.state.text2} />

You are not passing the state value to input elements. So, value defaults to null So React is letting you mod that input. And your mistakenly thinking your state has control of the input value.

edited Jul 5, 2020 at 14:41

answered Jul 5, 2020 at 12:55

ezio4df

4,4556 gold badges19 silver badges32 bronze badges

Collectives™ on Stack Overflow

Clear a text input whenever a checkbox is checked in reactjs

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related