Props are read-only (the development build enforces it)
React freezes the props object in development, so assigning to a prop throws. Nested objects like item are not frozen, which is why mutating item.name would silently corrupt the parent's state. Report the change instead, and let the owner copy and update.
In React, data travels one way: parents pass values down as props, and children report events up by calling callback props; siblings talk through their shared parent, and passing props through many layers that don't use them is called prop drilling.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a Rating component that shows 5 star buttons and calls onRate(n) when star n is clicked, and a parent that stores the rating and shows You rated N/5.
A ColorPicker and a Preview box are siblings. Make choosing a colour in the picker change the preview's background.
Explain it without notes
What is one-way data flow, and why does React use it?
How does a child component tell its parent that something happened? Show a small example.
Two sibling components need the same data. How do they communicate?
What is prop drilling, when is it fine, and what are the fixes?
Preview
Console
Nothing logged yet.Expected console output
props object frozen? true
item inside it frozen? false