Header(...): A valid React element (or null) must be returned. You may have returned undefined.

Question

function Header(props) { return ( <div className="header"> <h1>{props.title}</h1> </div> ); }

Header.propTypes = { title: React.PropTypes.string.isRequired, }

function Application(props) { return ( <div className="scoreboard"> <Header title={props.title}/>

  <div className="players">
    <div className="player">
      <div className="player-name">
        Jim Hoskins
      </div>
      <div className="player-score">
        <div className="counter">
          <button className="counter-action decrement"> - </button>
          <div className="counter-score"> 31 </div>
          <button className="counter-action increment"> + </button>
        </div>
      </div>
    </div>

    <div className="player">
      <div className="player-name">
        Andrew Chalkey
      </div>
      <div className="player-score">
        <div className="counter">
          <button className="counter-action decrement"> - </button>
          <div className="counter-score"> 33 </div>
          <button className="counter-action increment"> + </button>
        </div>
      </div>
    </div>
  </div>
</div>

); }

Application.propTypes = { title: React.PropTypes.string, };

Application.defaultProps = { title: "Scoreboard", }

ReactDOM.render(<Application />, document.getElementById('container'));

Why is my code throwing me the error: Header(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

I can't seem to see what the issue is...

Answer 1 · 2017-12-16T10:53:09Z

December 16, 2017 10:53am

Hi there, I think I know where your code is wrong: you forgot the return statement :).

Try to wrap your big block of code within a return statement and it should work fine.

Keep me in touch :).

Welcome to the Treehouse Community

Looking to learn something new?

Nadja Summerscales-Gunn

Nadja Summerscales-Gunn

Header(...): A valid React element (or null) must be returned. You may have returned undefined.

Paolo Scamardella

Paolo Scamardella

1 Answer

Thomas Dimnet

Thomas Dimnet