React Conditional Rendering, Lists and Forms Complete Tutorial (Updated June 2026) (Updated June 2026)

NASSCOM and Deloitte project a gap of 1.25 million AI-ready tech professionals in India by 2027 — and yet most React tutorials stop at "create a component and pass a prop." Episode 25 of the ABC Trainings Full Stack series fills the gap between toy examples and real applications. Conditional rendering, list rendering, and form handling are the three things you encounter in every single React project from a login page to a shopping cart to an admin dashboard. Get these right and your React code starts looking like production code. Get them wrong and you're debugging why your list shows undefined or why your form's input field won't update.

Conditional Rendering in React: if/else, Ternary, and Short-Circuit Patterns

Conditional rendering in React uses the same JavaScript logic you already know — if/else, ternary operators, and logical AND. The difference is where you use it. Inside JSX, you can't use a full if/else block, but you can use a ternary: {isLoggedIn ? : }. For showing something only when a condition is true, the logical AND shortcut works: {isLoading && }. For complex conditions with multiple branches, move the logic above the return statement and use regular if/else, then reference the resulting variable in your JSX. The wrong approach? Nested ternaries three levels deep — that's the kind of code that makes your teammates unhappy and interviewers ask follow-up questions.

Rendering Lists with map() and Why the key Prop Matters

Rendering lists in React always comes down to array.map(). You take your array of data, map over it, and return a JSX element for each item: {products.map(product =>

{product.name}

)}. The key prop is what React uses to track which items have changed, been added, or been removed — without it, React re-renders the entire list on any change instead of updating just the affected item. Always use a stable, unique identifier (like a database ID) as the key — never use the array index as key when the list can be reordered or filtered, because index-based keys cause React to show stale data in the wrong positions. This is one of the most common bugs in beginner React code.

Pattern	Syntax	When to Use
Ternary conditional	{condition ? A : B}	Two-branch conditions inside JSX
Short-circuit AND	{condition && Element}	Show element only when condition is true
List rendering	array.map(item => JSX element)	Render a collection of items
Controlled input	value={state} onChange={setState}	Forms where you need real-time access to input value
Form submit	onSubmit={handleSubmit} + e.preventDefault()	Prevent page reload and handle data on submit

Controlled Components: The Right Way to Handle Forms in React

A controlled component is an input whose value is always driven by React state. You bind the value of the input to a state variable: value={username}. Every time the user types, the onChange handler updates the state: setUsername(e.target.value). The input then re-renders with the new state value. This gives you complete control — you can validate on every keystroke, format input in real-time, or disable the submit button until all fields are valid. Trust me, once you understand controlled components, forms become predictable. The alternative — uncontrolled components with refs — exists, but it's used less often and feels closer to vanilla JavaScript than to the React way of doing things.

Handling Multiple Inputs with a Single State Object

When a form has multiple inputs — say, name, email, and phone — managing separate useState calls for each one gets repetitive. The cleaner pattern is a single state object: const [formData, setFormData] = useState({ name: "", email: "", phone: "" }). In the onChange handler, use the input's name attribute to update the right field: setFormData(prev => ({ ...prev, [e.target.name]: e.target.value })). This pattern scales to any number of form fields without adding new state variables. What most people don't realise is that this is the same pattern used in production forms at large React codebases — login pages, registration forms, checkout flows — all handled this way.

Form Submission, Validation, and Preventing Default Behaviour

Form submission in React uses the onSubmit event on the form element (not on the button). Inside the handler, call e.preventDefault() first — without this, the form will do a traditional HTML form submission and reload the page, wiping your React state. Then access your state variables to get the values: console.log(formData.name, formData.email). Validation can happen here — check for empty fields, email format, password length — and set error state to display messages to the user. The video above from our ABC Trainings series shows a complete registration form with validation built from scratch in 20 minutes.

How These Patterns Show Up in Real React Projects and Interviews

Conditional rendering, list rendering, and controlled forms appear in every single React technical interview at companies like Infosys, TCS, KPIT, Wipro, and product startups in Hinjewadi and Baner. A typical React interview round gives you 30–45 minutes to build a small feature: a product list with a filter, a form with validation, or a login flow with conditional dashboard access. If you can't render a list with correct keys, if your form breaks on submit, or if your conditional rendering flashes wrong content — you won't move forward regardless of what else you know. At ABC Trainings, students practice these patterns in every assignment from Week 3 onwards, specifically because they're the make-or-break basics in every technical round. Call 7039169629 for current Full Stack batch schedule.

FAQs

Why does React list rendering require a key prop for every item?

React uses the key prop to identify which items in a list have changed, been added, or been removed during re-renders. Without a unique key, React has no way to efficiently update only the changed items — it re-renders the entire list, which is slower and can cause bugs where components retain stale state. Always use a stable, unique identifier (like a database ID) as the key, never the array index when the list order can change.

What is the difference between controlled and uncontrolled components in React?

A controlled component's value is always driven by React state — you pass value={state} and onChange={setState} to the input, giving React full control. An uncontrolled component stores its value in the DOM and you access it using a ref when needed. Controlled components are recommended for most forms in React because they make validation, formatting, and form reset straightforward.

Can I use if/else statements directly inside JSX return statements?

No — you cannot use a full if/else block directly inside JSX (between parentheses in the return). JSX only accepts expressions, not statements. Instead, use a ternary operator (condition ? A : B) or the logical AND shortcut (condition && Element) inline. For complex conditions, write your if/else logic above the return statement, assign the result to a variable, and reference that variable in the JSX.

Does ABC Trainings teach conditional rendering and form handling in its Full Stack course?

Yes. Conditional rendering, list rendering, and controlled form components are covered in Week 3 and 4 of the Full Stack Development course at ABC Trainings. Students build practical exercises including a filterable product list and a registration form with validation. Batches run at Wagholi, Hadapsar, Cidco Sambhajinagar, Osmanpura, and Sangli. Call 7039169629 for schedule.