{ caption &&
    <p>{caption}</p>
}

Conditional rendering when truthy.

{ caption ||
    <p>Default caption.</p>
}

Conditional rendering when falsy.

{ caption && <p>{caption}</p> ||
    <p>Default caption.</p>
}

Conditional rendering.

export default () => {
    const [fixToTop, setFixToTop] = useState(false);
    return <Nav { ...(fixToTop && { style: { top: '0px' } }) } />
}

Optionally pass props to components.