Reputation: 1345
So I have the following:
// Build the component HTML.
return (
<dl className={ classes }>
{items.map((item, index) =>
{ item.type === 'dd' ?
<dd key={ index } index={ index }>{ item.text }</dd>
:
<dt className="search-result__description-list__description" key={ index } index={ index }>{ item.text }</dt>
}
)}
</dl>
);
The problem: nothing is rendering. The data is present in items
. When I simply log the content without the if-else statement it also returns my data. However, when I use the if-else statement nothing shows up. No errors ether.
Any thoughts?
Upvotes: 0
Views: 5041
Reputation: 16069
You forgot return statement
// Build the component HTML.
return (
<dl className={ classes }>
{items.map((item, index) =>
{ return item.type === 'dd' ?
<dd key={ index } index={ index }>{ item.text }</dd>
:
<dt className="search-result__description-list__description" key={ index } index={ index }>{ item.text }</dt>
}
)}
</dl>
);
You can see this fiddle with the same logic: https://jsfiddle.net/69z2wepo/94452/
Upvotes: 5
Reputation: 1039
The problem is in your arrow function, when using the block syntax ({}s
following the arrow), you will need to specify the returned value using the return
keyword.
Upvotes: 1