Passing props to components in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are props in React?

Props are inputs to React components. They are used to pass data from a parent component to a child component, like giving a gift to a friend.

beginner

How do you pass a prop named title with value "Hello" to a component Greeting?

You write: <Greeting title="Hello" />. This sends the value "Hello" to the Greeting component as a prop called title.

beginner

How does a functional component access props?

A functional component receives props as its first argument. For example: <code>function Greeting(props) { return &lt;h1&gt;{props.title}&lt;/h1&gt;; }</code>

intermediate

What happens if you don't pass a required prop to a component?

If a component expects a prop but you don't pass it, the prop will be undefined. This might cause errors or missing content unless you provide a default value.

beginner

Can props be changed inside a child component?

No, props are read-only inside the child component. They are like a gift you receive but cannot change. To change data, use state or callbacks.

How do you pass multiple props to a React component?

A <Component (name="John", age=30) />

B <Component props={{name: "John", age: 30}} />

C <Component name="John" age={30} />

D <Component>name="John" age={30}</Component>

You pass multiple props by listing them inside the component tag like <Component name="John" age={30} />.

Inside a functional component, how do you access a prop called color?

A getProp('color')

B this.color

C color()

D props.color

Props are accessed via the props object, so use props.color.

What is the correct way to provide a default value for a prop in a functional component?

A You cannot set default props in functional components

B Use default parameters: function Comp({ title = 'Hi' }) { ... }

C Use this.defaultProps = { title: 'Hi' }

D Set props.title = 'Hi' inside the component

You can use default parameters in the function signature to set default prop values.

Can a child component modify the props it receives?

A No, props are read-only

B Yes, props can be changed anytime

C Only if you use setState

D Only if props are passed as objects

Props are read-only and cannot be changed inside the child component.

Which of these is a valid way to pass a number prop called count with value 5?

A <Counter count={5} />

B <Counter count="5" />

C <Counter count='5' />

D <Counter count=(5) />

To pass a number, use curly braces: count={5}. Quotes pass strings.

Explain how props work in React and why they are important.

Think about how you give information to a friend to do something.

Describe how to pass and access multiple props in a functional React component.

Imagine sending a letter with several details and reading them inside.