Get default state value by receiving prop data - React

Question

I'm new to react.js. I'd like to get default value of state following_status by receiving props.user.following_status.

I'm passing user object ( user = { following_status: 'following', id:123 } ) to ReactionButton component. ReactionButton component is looks like this:

class RelationButton extends React.Component {

  constructor(props){
    super(props);
    console.log(props.user.following_status) #  undefined!!!

    this.state = {
      following_status: props.user.following_status
    }
...
    render() {
       if (this.state.following_status == 'following') {
         <UnFollowBtn/>
       } else {
         <FollowBtn/>
       }
    }

RelationButton was called by UserCardHeader component.

const UserCardHeader = (props) => {
  const user = props.user;
  return(
    <header className="user-card--full__header">
      <RelationButton user={user}></RelationButton>
    </header>
  )
}

I don't understand why console.log(props.user.following_status) returns undefined. I googled many websites like those:

those answers suggest

class FirstComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          x: props.initialX
        };
    }
}

but this didn't work for me.

If I add componentWillReceiveProps to the codes above,

  componentWillReceiveProps(props){
    console.log(props.user.following_status)   #=> "following"
    this.setState({following_status: props.user.following_status})
  }

everything works well. However I think it's weird solution and sometimes doesn't work. Why can't I receive object props in constructor(props) {} section?

can you try to `console.log('render')` inside `RelationButton` render method and see if it's not called twice? Maybe you did weird wrapping or user is asynchronous and therefore it's not available in mount but `componentWillReceiveProps` will get called on every props update — Milos Mosovsky, May 01 '18 at 09:09
@MilosMosovsky the out put is `render render` yes actually called twice — kansiho, May 01 '18 at 09:10
@TomaszMularczyk there is more than 4 parent components - I couldn't display all of them — kansiho, May 01 '18 at 09:13
if you log `props.user` in your `UserCardHeader` do you get any instances of `undefined`? — themollusk, May 01 '18 at 10:58

score 1 · Accepted Answer · answered May 01 '18 at 09:21

Without the full code, we can't tell what's wrong but it is obvious that following_status comes asynchronously to the component and that's why is not accessible right away in the constructor.

To somehow fix it you can detect if props have changed and reset state accordingly in componentDidUpdate.

class RelationButton extends React.Component {

  constructor(props){
    super(props);
    console.log(props.user.following_status) #  undefined!!!

    this.state = {
      following_status: props.user.following_status
    }
  }

  componentDidUpdate(prevProps) {
    if(prevProps.user.following_status !== this.props.user.following_status) {
      this.setState({ following_status: this.props.user.following_status })
    }
  }

  render() {
     // you forgot about return statements :
     if (this.state.following_status == 'following') {
       return <UnFollowBtn/>
     } else {
       return <FollowBtn/>
     }
  }
}

Get default state value by receiving prop data - React

1 Answers1