Using props in JSX in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are props in React?

Props are inputs to React components. They are like function arguments and let you pass data from a parent component to a child component.

beginner

How do you access props inside a functional component?

You receive props as a parameter in the function and access them using dot notation, like props.name.

beginner

What is the JSX syntax to use a prop called title inside a component?

You use curly braces to embed JavaScript expressions: {props.title} inside the JSX.

intermediate

Can props be changed inside a component?

No, props are read-only. You cannot modify them inside the component. To change data, use state or pass new props from the parent.

beginner

How do you pass a string prop called color with value blue to a component Box?

You write: <Box color="blue" />. This passes the string 'blue' as the color prop.

How do you pass data from a parent to a child component in React?

A Using local variables

B Using state inside the child

C Using CSS

D Using props

Props are the way to send data from parent to child components in React.

Inside a functional component, how do you access a prop named 'message'?

A props.message

B this.message

C state.message

D message()

Props are accessed via the props object, like props.message.

What is the correct JSX syntax to display a prop called 'name' inside a component?

A <props.name>

B {props.name}

C "props.name"

D (props.name)

Curly braces embed JavaScript expressions in JSX, so {props.name} shows the prop value.

Can you modify props inside a React component?

A Yes, props can be changed anytime

B Only if you use setState

C No, props are read-only

D Only in class components

Props are immutable inside components to keep data flow predictable.

How do you pass a number prop 'age' with value 30 to a component <User>?

A <User age={30} />

B <User age="30" />

C <User age='30' />

D <User age=(30) />

Use curly braces to pass numbers as props: .

Explain how props work in React and how you use them inside a functional component.

Think about how you give information to a child component.

Describe why props are read-only and what you do if you want to change data inside a component.

Consider data flow and component responsibility.