REACT MASTER CLASS /// CONDITIONAL RENDERING /// LISTS AND KEYS /// REACT LOGIC /// REACT MASTER CLASS /// CONDITIONAL RENDERING /// LISTS AND KEYS /// REACT LOGIC ///

React Logic & Lists

Control the flow of your interface. Render arrays safely and use logic gates to show exactly what the user needs.

ListsAndLogic.jsx
1 / 10
12345
⚛️

Tutor:React UI is dynamic. Depending on the state of your application, you might want to show different components. This is known as Conditional Rendering.


Skill Matrix

UNLOCK NODES TO ADVANCE YOUR REACT LOGIC.

Concept: Logic

Control component visibility. Use ? : for inline if/else or && to only render when true.

System Check

Which operator handles a simple 'If true, render X, otherwise render nothing' inside JSX?

Community Holo-Net

Share Your Logic

ACTIVE

Built an interesting conditionally rendered UI? Share it with the community.

Support Us

React: Conditionals & Lists

Author

Pascual Vila

Frontend Instructor // Code Syllabus

React's superpower is combining UI structure with JavaScript logic. You can control exactly what renders based on application state using standard JS features like conditions and array iterations.

Conditional Rendering

In React, you can conditionally render components in a few ways. Since JSX is just syntactic sugar for function calls, you cannot write standard if...else statements directly inside a JSX block.

  • Outside JSX: You can use standard if statements before your return to decide which JSX block to output.
  • Ternary Operator (? :): Perfect for rendering one thing or another inline. E.g., {isLoggedIn ? <User /> : <Guest />}
  • Logical AND (&&): Best when you only want to render something if a condition is true, and render nothing otherwise. E.g., {hasMessages && <Badge />}

Rendering Lists

You will rarely hardcode a list of similar items in a real app. Instead, you'll have an array of data. To render lists in React, you use the JavaScript array method .map().

.map() takes a callback function and returns a new array. By mapping an array of data into an array of JSX elements, React automatically renders all of them!

The Power of Keys

When rendering lists, React will throw a warning in your console if you forget the key prop. Keys are crucial for React's reconciliation algorithm.

Warning: Each child in a list should have a unique "key" prop.

A key helps React identify which items have changed, been added, or been removed. Without stable unique keys (like database IDs), React might re-render the entire list unnecessarily, or worse, mess up the internal component state (like inputs inside list items). Try to avoid using the array index as a key if the order of items might change.

View Deep Dive on Reconciliation+

When a component's state changes, React compares the newly returned elements with the previously rendered ones. For lists, React iterates over both lists of children at the same time and generates a mutation whenever there's a difference. Without keys, if you insert an element at the beginning, React will mutate every child instead of realizing it can keep the existing ones intact and just add the new one. Keys solve this inefficiency completely!

React Glossary

Conditional Rendering

The ability to render different UI elements or components based on the current state or props.

snippet.jsx

Ternary Operator

A compact if/else statement taking 3 arguments: condition ? true_expression : false_expression.

snippet.jsx

Logical AND (&&)

Evaluates the right side only if the left side is truthy. Used for 'render this only if true' logic.

snippet.jsx

.map() Method

A JavaScript array method that creates a new array populated with the results of calling a provided function on every element.

snippet.jsx

Key Prop

A special string attribute you need to include when creating lists of elements. It helps React identify changes.

snippet.jsx

Reconciliation

React's algorithm to figure out the most efficient way to update the DOM. Keys are a massive part of this process.

snippet.jsx