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:
