Conditional and Optional Props
In this page:
function ComponentName({ requiredProp, optionalProp }) {
return (
<div>
{requiredProp}
{optionalProp && <span>{optionalProp}</span>}
{optionalProp ?? "fallback"}
</div>
);
}Handling an Optional Prop
A prop is optional simply by not requiring the caller to pass it -- inside the component, you check whether it exists before using it, often with a default value or a conditional check.
This lets a component adapt its behavior based on what was actually provided.
if checks throughout the component.props.user.name when user wasn't passed) will throw an error.Example: Handling an Optional Prop
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function UserGreeting({ name, subtitle }) {
return (
<div>
<h2>Hello, {name}!</h2>
{subtitle && <p>{subtitle}</p>}
</div>
);
}
function App() {
return <div><UserGreeting name="Sam" subtitle="Welcome back" /><UserGreeting name="Alex" /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Conditionally Rendering Based on Props
A component can change what it renders depending on which props were passed in, using the same conditional rendering techniques (ternaries, &&) covered earlier.
This is especially useful for components that show slightly different UI in different situations, like a logged-in vs logged-out state.
Example: Conditionally Rendering Based on Props
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function StatusMessage({ isError, message }) {
if (isError) {
return <p style={{color: "red"}}>Error: {message}</p>;
}
return <p style={{color: "green"}}>{message}</p>;
}
function App() {
return <div><StatusMessage isError={true} message="Failed to load" /><StatusMessage isError={false} message="All good" /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Optional Props with Fallback Content
Sometimes an optional prop should show alternate fallback content rather than nothing at all when it's missing. The ternary operator works well here, letting you render one thing when the prop is present and something else when it isn't.
props.value ?? 'default text' (the nullish coalescing operator) as a concise way to supply fallback content for missing values.|| instead of ?? for fallbacks can misfire on legitimate falsy values like 0 or an empty string.Example: Optional Props with Fallback Content
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function ProfileBio({ bio }) {
return <p>{bio ? bio : "This user hasn't written a bio yet."}</p>;
}
function App() {
return <div><ProfileBio bio="I love building with React." /><ProfileBio /></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>- Marking a prop as required with PropTypes/TypeScript but still writing code that assumes it might be missing.
- Not providing a fallback for an optional prop, causing a crash when it's accessed but undefined.
- Making every single prop optional even when some genuinely must always be provided for the component to make sense.
- Not every prop a component accepts needs to be required.
- Optional props should have sensible defaults or safe fallback handling.
- Conditional logic inside a component often depends on whether an optional prop was provided.
- Clearly distinguishing required vs optional props makes a component easier to use correctly.
No browser-specific restrictions -- optional props rely on standard JavaScript conditional logic.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: