Valid component must be returned error

Question

My code:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class App extends Component{
  render() {
    const numbers = {
      first : {
        name : "Dad",
        number : "1243342432",
        info : "Best dad ever!",
        birthDay : "4.2.1955"
      },
      second: {
        name : "Mom",
        number : "5435234523",
        info : "Best mom ever!",
        birthDay : "8.2.1967"
      },
      third: {
        name : "Martin",
        number : "5742253223",
        info : "Best friend Martin ever!",
        birthDay : ""
      }
    };  

    const FurtherInfo = (props) => {
      <div id={props.number}>
        <span className="contact__info"></span>
        <span className="contact__more"></span>
      </div>
    }

    const Name = (props) => {
      <p id="contact__name">{props.name}</p>
    }

    const Contant = (props) => {
        <li className="contact">
          <Name name={props.name}></Name>
          <FurtherInfo number={props.number}></FurtherInfo>
        </li>
    }

    const listItems = Object.values(numbers).map(
      person => <Contant name={person.name} number={person.number} ></Contant> 
    );

    return (
      <ul>{listItems}</ul>
    );
    }
}

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

Looked through others problems with this error, unfortunately non of them matched my issue. Usually it has to do with not including () to return statement, however not in my case.

Anyone dealt with this before?

index.js is as always ReactDOM.render(<App />, document.getElementById('root'));

Basic ES6: as soon as you open an arrow function with `{` you lose the ability to do an implicit return; you must either `return` explicitly, or drop the `{}` when they're not required, e.g., if the function contains a single statement. — Dave Newton, Aug 10 '17 at 21:38
Possible duplicate of [Curly Brackets in Arrow Functions](https://stackoverflow.com/questions/35440265/curly-brackets-in-arrow-functions) — Ross Allen, Aug 10 '17 at 21:39

score 6 · Answer 1 · answered Aug 10 '17 at 21:35

none of

const FurtherInfo = (props) => {
  <div id={props.number}>
    <span className="contact__info"></span>
    <span className="contact__more"></span>
  </div>
}

const Name = (props) => {
  <p id="contact__name">{props.name}</p>
}

const Contant = (props) => {
    <li className="contact">
      <Name name={props.name}></Name>
      <FurtherInfo number={props.number}></FurtherInfo>
    </li>
}

are actually returning anything (void). You need to use ()s instead

const FurtherInfo = (props) => (
  <div id={props.number}>
    <span className="contact__info"></span>
    <span className="contact__more"></span>
  </div>
)

for example

Valid component must be returned error

1 Answers1