xxxxxxxxxx
/*
&& works best in conditionals that will sometimes do an action, but other times do
NOTHING at all.
*/
const tasty = (
<ul>
<li>Applesauce</li>
{ !baby && <li>Pizza</li> }
{ age > 15 && <li>Brussels Sprouts</li> }
{ age > 20 && <li>Oysters</li> }
{ age > 25 && <li>Grappa</li> }
</ul>
);
/*
If the expression on the left of the && evaluates as true, then the JSX on the
right of the && will be rendered. If the first expression is false, however, then
the JSX to the right of the && will be ignored and not rendered.
*/
xxxxxxxxxx
render() {
return (
<a className="navbar-brand" { url ? {href: url} : {}}>Logo</a>
)
}
xxxxxxxxxx
<Fragment>
{showMyComponent
? <MyComponent />
: <OtherComponent />}
</Fragment>
xxxxxxxxxx
// JSX and conditional
// In JSX, && is commonly used to render an element based on a boolean condition. && works best in conditionals that will sometimes do an action, but other times do nothing at all.
// If the expression on the left of the && evaluates as true, then the JSX on the right of the && will be rendered. If the first expression is false, however, then the JSX to the right of the && will be ignored and not rendered.
// All of the list items will display if
// baby is false and age is above 25
const tasty = (
<ul>
<li>Applesauce</li>
{ !baby && <li>Pizza</li> }
{ age > 15 && <li>Brussels Sprouts</li> }
{ age > 20 && <li>Oysters</li> }
{ age > 25 && <li>Grappa</li> }
</ul>
);
xxxxxxxxxx
You can use :
<input type="checkbox" checked={this.props.checked} />
OR
Remove single quotes
From :
todoInput = '<input type="checkbox" checked />';
Like this :
todoInput = <input type="checkbox" checked />;
OR
Conditional tags :
this.props.checked ? <CompA /> : <CompB />;