rendering component asynchronously

Question

I read this Reactjs async rendering of components and tried it to my own code but, error :

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

I have no clue why it doesn't work. please help me!

 constructor(props) {
    super(props);
    this.state = { asyncComponent: null };
  }

public componentDidMount() {
    import(`../../i18n/locales/${this.props.lang}`).then(o => {
      this.setState({
        asyncComponent: (
          <CustomSelects
            options={o.option}
            formattedMessageId="createroom_genre"
            value={this.props.genre}
            handleValueChange={this.handleGenreChange}
          />
        )
      });
    });
  }

 public render() {
     return (
            //...
           {this.state.asyncComponent ? (
              this.state.asyncComponent
            ) : (
              <div />
            )}
           //...
    )
 }

keep data in state, not components – xadm May 02 '19 at 12:13 — xadm, May 02 '19 at 12:13

score 0 · Answer 1 · answered May 03 '19 at 03:59

  constructor(props) {
    super(props);
    this.state = { options: null };
    //...
  }

  public componentDidMount() {
    this.props.initCreateRoomState();
    this.getSelectsIntl();
  }

  public componentWillUnmount() {}

  public componentWillReceiveProps() {
    this.getSelectsIntl();
  }

  private getSelectsIntl = () => {
    import(`../../i18n/locales/${this.props.lang}`).then(o => {
      this.setState({
        options: o.options
      });
    });
  }

  public render() {
      return (
            {this.state.options ? (
                <CustomSelects
                  options={this.state.options}
                  formattedMessageId="createroom_genre"
                  value={this.props.genre}
                  handleValueChange={this.handleGenreChange}
                />
              ) : (
                <div />
              )}
//...

rendering component asynchronously

1 Answers1