Below is a simple case with three ponents: App, ExmpleDataConsumer, and ExampleForm. App contains the other two.

I want the contents of the textarea in ExampleForm to be transmitted to ExampleDataConsumer's state when the form is submitted. Setting ExampleDataConsumer's state in doParse triggers a render which seems to be causing the form to submit, reloading the page, even though the handleSubmit method of ExampleForm calls event.preventDefault().

If I just log data to the console, preventDefault() works and the page does not refresh. What am I missing? Is this the wrong way to pass state between sibling ponents? Any help would be most appreciated.

    class App extends React.Component {
    constructor(props) {
        super(props);
        this.exampleForm = <ExampleForm doSomething = {this.doParse.bind(this)} />;
        this.exampleDataConsumer = <ExampleDataConsumer data="Hello, World!"/>;
    }

    doParse(data) {
        console.log('In App: ', data);
        this.exampleDataConsumer.setState({data: data});
    }

  render() {
    return (
      <div className="App">
          {this.exampleForm}
          {this.exampleDataConsumer}
      </div>
    );
  }
}

class ExampleDataConsumer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: props.data
        };
    }

    render() {
        return ( <div>{this.state.data}</div>)
    }
}

class ExampleForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 'Some starter text.'
        };

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

    handleSubmit(event) {
        this.props.doSomething(this.state.value);
        this.setState({value: ''});
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    <textarea rows="20" cols="200" value={this.state.value} readOnly/>
                </label>
                <input type="submit" value="Parse" />
            </form>
        );
    }
}

Below is a simple case with three ponents: App, ExmpleDataConsumer, and ExampleForm. App contains the other two.

I want the contents of the textarea in ExampleForm to be transmitted to ExampleDataConsumer's state when the form is submitted. Setting ExampleDataConsumer's state in doParse triggers a render which seems to be causing the form to submit, reloading the page, even though the handleSubmit method of ExampleForm calls event.preventDefault().

If I just log data to the console, preventDefault() works and the page does not refresh. What am I missing? Is this the wrong way to pass state between sibling ponents? Any help would be most appreciated.

    class App extends React.Component {
    constructor(props) {
        super(props);
        this.exampleForm = <ExampleForm doSomething = {this.doParse.bind(this)} />;
        this.exampleDataConsumer = <ExampleDataConsumer data="Hello, World!"/>;
    }

    doParse(data) {
        console.log('In App: ', data);
        this.exampleDataConsumer.setState({data: data});
    }

  render() {
    return (
      <div className="App">
          {this.exampleForm}
          {this.exampleDataConsumer}
      </div>
    );
  }
}

class ExampleDataConsumer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: props.data
        };
    }

    render() {
        return ( <div>{this.state.data}</div>)
    }
}

class ExampleForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 'Some starter text.'
        };

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

    handleSubmit(event) {
        this.props.doSomething(this.state.value);
        this.setState({value: ''});
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    <textarea rows="20" cols="200" value={this.state.value} readOnly/>
                </label>
                <input type="submit" value="Parse" />
            </form>
        );
    }
}

• javascript
• reactjs

2 Answers 2

In handleSubmit(event), you should first call the preventDefault() method.

 handleSubmit(event) {
    event.preventDefault();
    this.props.doSomething(this.state.value);
    this.setState({value: ''});
}

check this update something in your code . i hope this is helpful for you

    class App extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            data:'Hello, World!'
        }
    }

    doParse(data) {
        console.log('In App: ', data);
        this.setState({data: data});
    }

  render() {
    return (
      <div className="App">
          <ExampleForm doSomething = {this.doParse.bind(this)} />
          <ExampleDataConsumer data={this.state.data}/>
      </div>
    );
  }
}

class ExampleDataConsumer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: props.data
        };
    }
    ponentWillReceiveProps(nextProps) {
        this.setState({data:nextProps.data});
    }

    render() {
        return ( <div>{this.state.data}</div>)
    }
}

class ExampleForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: ''
        };

        this.handleSubmit = this.handleSubmit.bind(this);
        this.dataUpdate = this.dataUpdate.bind(this);
    }

    handleSubmit(event) {
        this.props.doSomething(this.state.value);
        this.setState({value: ''});
        event.preventDefault();
    }

    dataUpdate(ev){
        this.setState({value:ev.target.value });
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    <textarea rows="20" cols="200" placeholder="Some starter text." value={this.state.value} onChange={this.dataUpdate.bind(this)}/>
                </label>
                <input type="submit" value="Parse" />
            </form>
        );
    }
}