CODEWITHSUNDEEP
reactjsrender
Anna
Anna

Reputation: 1649

Getting the error: 'A valid React element (or null) must be returned' error with one of the component in ReactJS

Below is my code 

 render() {
  const mainSection = (
    <MainSection
        title={ __( 'main.section.title' ) }
        onClose={ this.handleOnClose }
    />
  );

  const secondarySection = (

      {
        this.state.error ? (
        <Message
            onClose={ this.handleMessageClose }
            style={ styles.message }
        >
          { this.state.error }
        </Message>
        ) : null
      }

      <div>
        <SecondaryForm
            data={ {
              username: this.state.username,
              } }
              onChangeUsername={ this.handleUsernameChange }
              onSaveUsername={ this.handleSaveUserName }
        />
      </div>
  );
  return (
         this.state.show.section === true ? { secondarySection } : { mainSection }
    );
  }

I'm getting this error:

A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Please Help me in this, Thanks.

Upvotes: 0

Views: 936

Answers (4)

Mayank Shukla
Mayank Shukla

Reputation: 104369

Changes:

*Use {} to use a javascript code inside html element, once you use {} then no to put another {} inside that like you used in ternary operator.

*JSX can't return more than one element so always try to wrap all the code in a <div> or by any other wrapper element.

Try this: 

render() {
  const mainSection = (
    <MainSection
        title={ __( 'main.section.title' ) }
        onClose={ this.handleOnClose }
    />
  );

  const secondarySection = this.state.error ? 
        <div>
           <Message
              onClose={ this.handleMessageClose }
              style={ styles.message }
           >
              { this.state.error }
           </Message>
           <SecondaryForm
              data={
                {username: this.state.username,}
              }
              onChangeUsername={ this.handleUsernameChange }
              onSaveUsername={ this.handleSaveUserName }
           />
        </div>
        : null;   

  return(
        <div>
          {this.state.show.section === true ? secondarySection :  mainSection } 
        </div>
    );
}

Upvotes: 0

Andrii Starusiev
Andrii Starusiev

Reputation: 7764

Do that guys said and just remove {} from this.state.show.section === true ? { secondarySection } : { mainSection } like this.state.show.section === true ? secondarySection : mainSection

Upvotes: 1

pivanov
pivanov

Reputation: 44

Components should return only one element. You need to wrap your return in a single element/div.

You code should looks like:

render() {
  const mainSection = (
    <MainSection
        title={ __( 'main.section.title' ) }
        onClose={ this.handleOnClose }
    />
  );

  const secondarySection = (
      <div>
        {
          this.state.error ? (
          <Message
              onClose={ this.handleMessageClose }
              style={ styles.message }
          >
            { this.state.error }
          </Message>
          ) : null
        }

        <SecondaryForm
            data={ {
              username: this.state.username,
              } }
              onChangeUsername={ this.handleUsernameChange }
              onSaveUsername={ this.handleSaveUserName }
        />
      </div>
  );
  return (
         this.state.show.section === true ? { secondarySection } : { mainSection }
    );
  }

Upvotes: 0

Jesvin Jose
Jesvin Jose

Reputation: 23078

Your secondarySection is a couple of elements. If your render method must return <X1/> and <X2/>, wrap them like <div><X1/><X2/></div> so that its all inside a single element. React assumes each component would be an element or null, so it rejects anything else.

  const secondarySection = (
    <div>
      {
        this.state.error ? (
        <Message
            onClose={ this.handleMessageClose }
            style={ styles.message }
        >
          { this.state.error }
        </Message>
        ) : null
      }

      <div>
        <SecondaryForm
            data={ {
              username: this.state.username,
              } }
              onChangeUsername={ this.handleUsernameChange }
              onSaveUsername={ this.handleSaveUserName }
        />
      </div>
  </div>
  );

Upvotes: 0

Related Questions