Gültige Komponente muss Fehler zurückgegeben werden

Question

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

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

durch andere Sah Probleme mit diesem Fehler, leider nicht von ihnen mein Problem gefunden. Gewöhnlich hat es damit zu tun, dass keine Angabe() zu return Aussage, aber nicht in meinem Fall.

Hat jemand schon einmal damit umgegangen?

index.js ist wie immer ReactDOM.render(<App />, document.getElementById('root'));

Answer 1

keiner von

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

zurückkehren eigentlich alles (void). Sie müssen () s statt

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

zum Beispiel