一个 React 组件正在渲染但没有显示在网站上

Question

A react component is not showing up on the webpage even though it is getting rendered.

I have attached the code and screenshot of the components below.

This is the code inside "App.jsx" file.

    function createCard(prop){
    return (<Card key={prop.id} name={prop.name} emoji={prop.emoji} desc={prop.meaning} 
    />);
    }

    function App(){
    return(
    <div>
    <h1>
    <span>emojipedia</span>
    </h1>
    {emojipedia.map(createCard)}
    </div>
    );  
    }

This is the code inside "Card.jsx" file.

    <div>
    <dl className="dictionary">
    <div className="term">
    <dt>
    <Name name="props.name" />
    <Emoji emoji="props.emoji"/>
    </dt>
    <Description desc="props.desc" />
    </div>
    </dl>
    </div>

In the code above, <Description desc="props.desc /> is getting rendered but not showing up on the webpage.

Please refer to the below images:

Answer 1

You have a typo in the props. Change it from desp to desc then it should work.