CODEWITHSUNDEEP
reactjsreact-native
Pablo Darde
Pablo Darde

Reputation: 6432

React Native doesn't update child component props

I'm working on a React Native project and I realized that React Native seems to break the React flow (Parent to children) props update.

Basically, I'm calling a "Menu" component from an "App" component, passing a prop to "Menu". However, when I update the "App" state, the props on "Menu" should update, but this doesn't happen. Am I doing something wrong?

That's my code:

App.js

import React from 'react';
import {
 View,
 Text
} from 'react-native';

import Menu from './Menu';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      opacity: 2
    }
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        opacity: 4
      });
    }, 3000);
  }

  render() {
    return(
      <View>
        <Menu propOpacity={this.state.opacity} />
      </View>
    );
  }
}

export default App;

Menu.js

import React from 'react';
import {
View,
Text
} from 'react-native';

class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      menuOpacity: props.propOpacity
    }
  }

  render() {
    return(
      <View>
        <Text>Menu opacity: {this.state.menuOpacity}</Text>
      </View>
    );
  }
}

Menu.propTypes = {
  propOpacity: React.PropTypes.number
}

Menu.defaultProps = {
  propOpacity: 1
}

export default Menu;

Upvotes: 1

Views: 6458

Answers (1)

Andreyco
Andreyco

Reputation: 22872

React is not breaking data flow... You are. After initial state initialisation, you forget to update Menu's state later, when parent sends updated props.

Try this...

class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      menuOpacity: props.propOpacity
    }
  }

  componentWillUpdate(nextProps, nextState) {
      nextState.menuOpacity = nextProps.propOpacity;
  }

  render() {
    return(
      <View>
        <Text>Menu opacity: {this.state.menuOpacity}</Text>
      </View>
    );
  }
}

Upvotes: 4

Related Questions