CODEWITHSUNDEEP
javascriptreact-nativecomponentsrender
Patrioticcow
Patrioticcow

Reputation: 27058

How to re-render parent component on change on sub component in react native?

I have a component that renders another component. When i make a change on the sub component, I would like the main component to re render.

In the example below onSubmit from the second component, triggers _onSubmit on the main component, but setState doesn't re-render the view

Ideas?

class MainLayout extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: 'no',
    };

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

  // this get's triggered by _checkSubmitReady() on the second component
  _onSubmit(data) {
    // this state get's set, but this component is not re-rendered
    // i assume render() should be called here
    this.setState({data: data});
  }

  render() {
    return (
      <View><SecondLayout onSubmit={this._onSubmit}/>{this.state.data}</View>
    );
  }
}


class SecondLayout extends Component {
  constructor(props) {
    super(props);

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

  _checkSubmit() {
    this.props.onSubmit('yes');
  }

  // sub component is mounted, call onSubmit() on parent component
  componentDidMount() {
    this._checkSubmit();
  }

  render() {
    return (
      <View><Text>Nothing here</Text></View>
    );
  }
}

Upvotes: 3

Views: 2826

Answers (1)

Caleb
Caleb

Reputation: 2298

Try:

_onSubmit(data) {
  this.setState({ data: data }, () => {
    this.forceUpdate();
  });
}

Or if you are using ES5:

_onSubmit(data) {
  this.setState({ data: data }, function () {
    this.forceUpdate();
  }.bind(this));
}

Upvotes: 1

Related Questions