Javascript 有效组件必须返回错误

我的代码：

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>
    );
    }
}

但是获取：必须返回有效的React元素或null。您可能返回了未定义、数组或其他无效对象

通过这个错误查看了其他问题，不幸的是没有一个与我的问题相匹配。通常它与不包含to return语句有关，但在我的情况下不是这样

以前有人处理过吗

index.js总是ReactDOM.render，document.getElementById'root'

没有

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 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>
}

---

例如

Basic ES6：一旦使用{打开箭头函数，您就失去了执行隐式返回的能力；您必须显式返回{}，或者在不需要时删除{}，例如，如果函数包含一条语句。Basic ES6的可能重复：一旦使用{打开箭头函数{您将失去执行隐式返回的能力；您必须显式返回{}，或者在不需要时删除{}，例如，如果函数包含一条语句。可能重复