QReact · Interview preparation
How do you render content conditionally in React?
Use an if statement, ternary, or logical AND depending on how many branches are needed.
The idea to remember.
Use an if statement, ternary, or logical AND depending on how many branches are needed. Avoid rendering numeric zero accidentally from a condition such as items.length && a component.
01Learn by doing
From first example to real project.
Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.
Basic: a stable list
01 / BEGINNERA stable ID lets React keep each row's identity.
const todos = [{ id: 1, text: 'Read docs' }, { id: 2, text: 'Build app' }];
function TodoList() {
return <ul>{todos.map(todo => <li key={todo.id}>{todo.text}</li>)}</ul>;
}Intermediate: intentional reset
02 / INTERMEDIATEChanging a key tells React this is a new form, so its local state resets.
function ProfileEditor({ person }) {
return <ProfileForm key={person.id} person={person} />;
}Real scenario: reorderable tasks
03 / REAL SCENARIOUse database IDs, not array positions, when tasks can move.
function TaskBoard({ tasks, onMove }) {
return tasks.map(task => (
<TaskCard key={task.id} task={task} onMove={() => onMove(task.id)} />
));
}02Check your understanding
Try it in your own words.
Explain how do you render content conditionally in React without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.
Keep learning here.
Explore more in-depth guides, exercises and related interview questions in this library.
Browse React study guides ↗