Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Note that the vars at the top keep the JSX simple. Other options here: https://verekia.com/react/logic-less-jsx/
// Logic-less JSX via vars above
const Animal = ({ id, name, legCount, isFriendly }) => {
const url = `url/animal/${id}`
const legCountStr = toString(legCount) || '?'
const friendliness = { true: 'Friendly', false: 'Unfriendly' }[isFriendly]
const hasNotEnoughData = legCount === undefined && isFriendly === undefined
return (
<li>
<a href={url}>{name}</a> - {legCountStr} legs
{friendliness && ` - ${friendliness}`}
{hasNotEnoughData && ' - Not enough data!'}
</li>
)
}
// Without declaring vars above, it's harder to read:
const Animal = ({ id, name, legCount, isFriendly }) => (
<li>
<a href={`url/animal/${id}`}>{name}</a> - {toString(legCount) || '?'} legs
{isFriendly !== undefined &&
` - ${isFriendly ? 'Friendly' : 'Unfriendly'}`}
{legCount === undefined && isFriendly === undefined &&
' - Not enough data!'}
</li>
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.