Multiple Form Inputs — Complete Guide
Multiple Form Inputs — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of React.js Tutorial on Toolliyo Academy.
On this page
React.js Tutorial · Lesson 20 of 100
Component Architecture
Beginner → Intermediate → Advanced → Professional
Beginner · 1 — Foundations · ~12 min read · Module 2: JavaScript & React Fundamentals
Introduction
This lesson is part of the beginner section. We explain Component Architecture slowly, with examples you can copy and run. If something is unclear, read it twice — that is how everyone learns. Component architecture is how you split UI into containers (data/logic) and presentational components (pure display). Smart parents fetch data; dumb children receive props. Clear boundaries make testing easier — you can test a presentational component with fake props without mocking APIs.
Component Architecture appears in almost every file you will write. Once it clicks, later lessons (hooks, routing, APIs) become much easier.
When will you use this?
You use this in every component you write from your first app to your tenth year on the job.
- Product pages, login forms, and todo lists all use components, props, and state.
- When a user types in a search box, React state holds the text and filters a list.
Real-world: Freshdesk ticket inbox split
Freshdesk inbox container loads tickets from API; TicketRow only displays one ticket. Support agents get faster renders when filter changes because rows stay dumb.
Production-style code
function TicketInbox() {
const [tickets, setTickets] = useState([]);
const [filter, setFilter] = useState('open');
useEffect(() => {
fetch(`/api/tickets?status=${filter}`).then(r => r.json()).then(setTickets);
}, [filter]);
return (
<>
<FilterBar value={filter} onChange={setFilter} />
{tickets.map(t => <TicketRow key={t.id} ticket={t} />)}
</>
);
}
function TicketRow({ ticket }) {
return (
<article>
<h4>#{ticket.id} {ticket.subject}</h4>
<p>{ticket.customerEmail}</p>
</article>
);
}What happens in production: Container/presentational split lets designers redesign TicketRow without touching API polling logic.
Lesson example (start here)
Copy this smaller example first. Once it works, compare it with the real-world code above.
// UserList.jsx — fetches and passes data
function UserList() {
const [users, setUsers] = useState([]);
useEffect(() => { fetch('/api/users').then(r => r.json()).then(setUsers); }, []);
return users.map(u => <UserRow key={u.id} user={u} />);
}
// UserRow.jsx — only displays
function UserRow({ user }) {
return <tr><td>{user.name}</td><td>{user.email}</td></tr>;
}Line-by-line walkthrough
| Code | What it means |
|---|---|
// UserList.jsx — fetches and passes data | Comment — notes for humans; the computer ignores it. |
function UserList() { | Defines a function — often a component or event handler. |
const [users, setUsers] = useState([]); | Creates state: a value that can change, plus a function to update it. |
useEffect(() => { fetch('/api/users').then(r => r.json()).then(setUsers); }, []); | Runs side effects — fetch data, timers, or subscriptions — after the screen updates. |
return users.map(u => <UserRow key={u.id} user={u} />); | Defines a function — often a component or event handler. |
} | Closes a block started by { or ( above. |
// UserRow.jsx — only displays | Comment — notes for humans; the computer ignores it. |
function UserRow({ user }) { | Defines a function — often a component or event handler. |
return <tr><td>{user.name}</td><td>{user.email}</td></tr>; | Sends UI or a value back to whoever called this function. |
} | Closes a block started by { or ( above. |
How it works (big picture)
- UserList owns data loading.
- UserRow only renders one row.
- If the table design changes, you edit UserRow without touching fetch logic.
Do this on your computer
- Identify a large component and extract a child that only receives props.
- Move fetch or state to the parent.
- Name files after the component.
- Read the real-world section and name which part of the app uses this topic.
- Run the example locally and confirm the same behavior in the browser.
- Change one value in the example (text, initial state, or URL) and predict what will happen before you save.
Experiments — try changing this
- Change text or labels in the example and save — watch the browser update.
- Break the code on purpose (remove a bracket), read the error message, then fix it.
- Change the initial state value and see the starting UI change.
- Add one more item to the array in the example and confirm it appears in the list.
Remember
Split data components and display components. One component, one main responsibility. Compose small pieces into pages.
Common questions
When to use Context?
When many distant components need the same data (theme, logged-in user).
How long should I spend on Component Architecture?
Until you can explain it in your own words and run the example without looking at the answer. Beginners often need 30–60 minutes per new hook or routing topic; setup lessons may take one afternoon.
What if I get stuck on Component Architecture?
Re-read the line-by-line walkthrough, check the browser console for red errors, and compare your code character-by-character with the example. Search the exact error text — someone else had it too.
Where is Component Architecture used in real jobs?
See the real-world section above — the same pattern appears in LMS, banking, e-commerce, and SaaS products. Interviewers ask you to explain it using one concrete example from your project or this lesson.