React/Redux : using data from Redux store during component's initial render() call

Question

I am wondering how to make use of data in a Redux store during the initial render of a component. I'm attempting to set the name attribute of a component using data from MongoDB that is stored in an auth object in Redux.

<FontAwesome className="share-icon" name={this.props.auth.primaryAccount} />;

The auth.primaryAccount key will contain a string (either "google", "facebook", "github" or "twitter" and when this string populates as the name attribute in the component, it will render the proper brand icon.

If I have a parent container that is synced to the Redux store via the react-redux Connect() helper, where the auth object is made available to props via mapStateToProps, if component is placed directly into a parent component's render() statement, this.props.auth.primaryAccount has a null value when the component intially renders. Placing console.log(this.props.auth) into the component's componentDidMount method results in a null value, while placing console.log(this.props.auth) into the componentDidUpdate method results in the expected auth object from Redux.

  render() {
      return (
       <div className="dashboardContainer">
        <h1>Dashboard</h1>
        <PanelContainer bordered={false} defaultActiveKey={["1"]}>
          <Panel header="PRIMARY ACCOUNT INFORMATION" key="1" showArrow={false}>
            <FontAwesome className="share-icon" name={this.props.auth.primaryAccount} />
          </Panel>
        </PanelContainer>
       </div>
      );
    }

The proper value for this.props.auth.primaryAccount isnt' made available from Redux until after the initial component mount/render. I'm assuming that is due to the async nature of the auth action creator's query to MongoDB to retrieve the auth object data.

I have been able to get around this by using a switch statement within a helper function that prevents the component from rendering until the Redux data has been made available within this.props (below) however I'd hate to have to write helper functions for every line of JSX that references data stored in Redux. What is the best way to utilized Redux data for component render?

  renderIcon() {
    switch (this.props.auth) {
      case null:
        return; 
      default:
        return <FontAwesome className="share-icon" name={this.props.auth.primaryAccount} />;
    }
  }

  render() {
    return (
      <div className="dashboardContainer">
        <h1>Dashboard</h1>
        <PanelContainer bordered={false} defaultActiveKey={["1"]}>
          <Panel header="PRIMARY ACCOUNT INFORMATION" key="1" showArrow={false}>
            {this.renderIcon()}
          </Panel>
        </PanelContainer>
      </div>
    );
  }
}

tenor528 tenor528 · Accepted Answer · 2018-02-02T01:13:59

It is a very common pattern to see checking for data in react projects. People often use a different syntax than a switch statement though. They often use a conditional shortcut like this:

renderIcon() {
    var auth = this.props.auth
    return auth && <FontAwesome className="share-icon" name={auth.primaryAccount} />;
}

Another version is with the ternary operator:

renderIcon() {
    var auth = this.props.auth
    return auth ? <FontAwesome className="share-icon" name={auth.primaryAccount} /> : null;
}

React/Redux : using data from Redux store during component's initial render() call

1 Answers