CODEWITHSUNDEEP
javascriptreactjsreduxparent-childstate-management
Young Scooter
Young Scooter

Reputation: 504

How can I change a child's state from the parent component

So I have a React web page.

The parent component contains all of the children components (drop-downs, radio buttons, tables, etc.) Once I submit all of the forms with a button, I want all of the components states to return to null.

Is this possible without Redux. I know I should most definitely use Redux at this point and I am about to begin learning it in the next couple of days, but before jumping it i would just like to wrap my head around if what I am trying to do is possible/impossible without React.

Just for peace of mind and a full understanding.

Upvotes: 2

Views: 1453

Answers (4)

devserkan
devserkan

Reputation: 17608

As I upvoted, I recommend @Nick Swope's logic. Still, I want to provide two examples. I'm not sure this suits your situation but here are the examples.

class App extends React.Component {
  state = {
    name: "",
    select: "",
  }

  defaultState = {
    name: "",
    select: "",
  };


  handleChane = e => this.setState( {
    [ e.target.name ]: e.target.value,
  } );

  handleSubmit = ( e ) => {
    e.preventDefault();
    alert( JSON.stringify( this.state ) );
    this.setState( this.defaultState );
  }

  render() {
    console.log( this.state );
    return (
      <form onSubmit={this.handleSubmit} >
        <Input onChange={this.handleChane} />
        <Select onChange={this.handleChane} />
        <button>Send</button>
      </form>
    );
  }
}

const Input = props => (
  <div>
    <input onChange={props.onChange} name="name" />
  </div>
);

const Select = props => (
  <div>
    <select onChange={props.onChange} name="select">
      <option>Choose one</option>
      <option>Foo</option>
      <option>Bar</option>
      <option>Baz</option>
    </select>
  </div>
);

ReactDOM.render(
  <App />,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

In this example, you keep a default state and after form submission, you reset the state. As you can see, form values still there. Now, here is the second option:

class App extends React.Component {
  state = {
    name: "",
    select: "",
  }

  defaultState = {
    name: "",
    select: "",
  };

  formRef = React.createRef();

  handleChane = e => this.setState( {
    [ e.target.name ]: e.target.value,
  } );

  handleSubmit = ( e ) => {
    e.preventDefault();
    alert( JSON.stringify( this.state ) );
    this.setState( this.defaultState );
    this.formRef.current.reset();
  }

  render() {
    console.log( this.state );
    return (
      <form ref={this.formRef} onSubmit={this.handleSubmit} >
        <Input onChange={this.handleChane} />
        <Select onChange={this.handleChane} />
        <button>Send</button>
      </form>
    );
  }
}

const Input = props => (
  <div>
    <input onChange={props.onChange} name="name" />
  </div>
);

const Select = props => (
  <div>
    <select onChange={props.onChange} name="select">
      <option>Choose one</option>
      <option>Foo</option>
      <option>Bar</option>
      <option>Baz</option>
    </select>
  </div>
);

Here, you rest your state and clear your form using a ref. I can't put this into the snippet since React version is a little bit older here.

Upvotes: 1

bathpp
bathpp

Reputation: 470

Parent component can have a reset state that is triggered by the form submit button, and pass it as a prop to its children, in your case all the form elements(drop-downs, radio buttons, tables, etc.).

Then the children could react on this reset prop in its life-cycle hook (componentWillReceiveProps or getDerivedStateFromProps).

Upvotes: 0

Jonas Wilms
Jonas Wilms

Reputation: 138247

A few simple options:

1) reload the whole page:

  location.reload();

2) remount the App component:

 reactDOM.unmount(document.body);
 reactDOM.render(<App />, document.body);

Upvotes: -1

Nick Swope
Nick Swope

Reputation: 331

You can keep all of the state values in the parent component and pass them down as props with a change handler to your presentational components. Then you can just reset the whole state when you submit the form. This is probably the most "react-y" way to do it.

If you don't want to do that, you could pass in a sort of "reset" prop to each of your child components and when this prop turns to true, reset the state, then reset the parent "reset" prop back to false. However, I personally don't think this is a great way to do this and would strongly recommend the first option.

Edit: You definitely don't need to introduce redux to accomplish what you're trying to do

Upvotes: 5

Related Questions