When working with props and components, sometimes we need to send one specific property, when matches specific condition.
const MyComponent = () => {
return (
<Select label="Countries" options={} required/>
);
}
if we want to send required just when matches specific conditions, we can spread the properties
const MyComponent = () => {
return (
<Select label="Countries" options={} {(condition && { required })} />
);
}
You can't use regular if/else conditions inside a component definition. Use Conditional (ternary) operator instead.
// if
{condition && (<span>Rendered when `truthy`</span>) }
// unless
{condition || (<span>Rendered when `falsey`</span>) }
// if-else
{condition ? (<span>Rendered when `truthy`</span>) : (<span>Rendered when `falsey`</span>)}
Top comments (0)