CODEWITHSUNDEEP
reactjs
escplat12
escplat12

Reputation: 2521

Pass updated state of parent to child component in React JS

I want to pass updated state of address in the parent component, to the center property of the child component. More specificaly, from the App component to the BaseMap component. However, I can't seem to make it work. Fresh pair of eyes that could help would be appreciated!

This is my code (I deleted the fetch function, it works just fine so it won't bother you. I just need to update the state of my child component):

Parent:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      avatar: '',
      username: 'nickname93',
      realName: '',
      location: '',
      followers: '',
      following: '',
      repos: '',
      address: ''
      }
  }

  render() {
    return (
      <div>
        <SearchBox fetchUser={this.fetchUser.bind(this)}/>
        <Card data={this.state} />
        <BaseMap center={this.state.address}/>
      </div>
    );
  }

  fetchApi(url) {
    // some fetch functionality
  }

  fetchUser(username) {
    let url = `https://api.github.com/users/${username}`;

    this.fetchApi(url);
  }

  componentDidMount() {
    let url = `https://api.github.com/users/${this.state.username}`;

    this.fetchApi(url);
  }

}

And the child component:

export default class BaseMap extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            center: [24, 56],
            zoom: 11
        }
    }

    render() {
        return (
            <Col md={10} mdPull={1}>
                <div className="map">
                    <GoogleMap
                    bootstrapURLKeys={'AIzaSyBhzwgQ3EfoIRYT70fbjrWASQVwO63MKu4'}
                    center={this.state.center}
                    zoom={this.props.zoom}>
                    </GoogleMap>
                </div>
            </Col>
        );
    }
}

Upvotes: 1

Views: 2906

Answers (2)

KeshavDulal
KeshavDulal

Reputation: 4164

Your value is being passed from the parent component App to your child component BaseMap.

You can simply access or use the properties (also known as props) passed to the child component from parent by using this.props.center instead of this.state.center.

export default class BaseMap extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        center: [24, 56],
        zoom: 11
    }
}

render() {
    return (
        <Col md={10} mdPull={1}>
            <div className="map">
                <GoogleMap
                bootstrapURLKeys={'AIzaSyBhzwgQ3EfoIRYT70fbjrWASQVwO63MKu4'}

                center={this.state.center} // this is [24,56]

                centerFromParentComponent = {this.props.center} // this is the property passed from parent component

                zoom={this.props.zoom}>
                </GoogleMap>
            </div>
        </Col>
    );
}

}

Using this.props you can access any properties (such as states, variable or methods) that you are passing from your parent component.

You might also want to have a look at componentWillReceiveProps() method. You might be in need it soon.

Upvotes: 3

Phi Nguyen
Phi Nguyen

Reputation: 3056

Using this.props.center instead of this.state.center if you want BaseMap receive state update from the parent App. It seems you want to set default value for the center prop. Here is the doc to declare a default prop.

Upvotes: 1

Related Questions