Quotes make strings, braces make numbers
points="5" passed the text "5", so + 1 glued the strings together. points={5} passed a number. React never converts prop types for you.
Props are the inputs of a component: the parent writes them like attributes, React collects them into one object, and the child reads that object (usually by destructuring) to decide what to show. Any JavaScript value can be a prop: strings, numbers, booleans, objects, arrays, functions and JSX.
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 Weather component that receives city (string), temp (number) and sunny (boolean) and shows Pune: 31°C ☀️ or Pune: 24°C ☁️. Render it for two cities.
Write a Tags component that receives an array items and shows them joined with · . Render it with three tags.
Explain it without notes
What are props, and how does a component receive them?
When do you use quotes and when braces for a prop's value?
How does a child component tell its parent that something happened?
Why do some developers say "props flow down, events flow up"?
Preview
Console
Nothing logged yet.Expected console output
string points + 1 = 51
number points + 1 = 6