Default props in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are default props in React?

Default props are values given to a React component's props that are used if no value is provided by the parent component. They help ensure the component works with sensible defaults.

beginner

How do you set default props in a React functional component?

You can set default props by assigning default values in the function parameter list, like <code>function MyComponent({ title = 'Hello' }) { ... }</code>. This way, if <code>title</code> is not passed, it defaults to 'Hello'.

beginner

Why are default props useful in React components?

They prevent errors by providing fallback values, improve component reusability, and make components easier to use without always specifying every prop.

beginner

Can you override default props in React? How?

Yes, you override default props by passing a prop value when using the component. The passed value replaces the default.

beginner

Show an example of a React functional component with default props using ES6 syntax.

Example:<br><pre>function Greeting({ name = 'Friend' }) {<br>  return &lt;h1&gt;Hello, {name}!&lt;/h1&gt;<br>}</pre>

What happens if you don't pass a prop that has a default value in a React component?

A The component does not render.

B The component throws an error.

C The component uses the default value for that prop.

D The prop value becomes undefined.

If a prop is not passed, React uses the default value defined for that prop.

How do you define default props in a React functional component?

A By setting default values in the function parameters.

B By using <code>this.defaultProps</code> inside the function.

C By calling <code>setDefaultProps()</code> method.

D By wrapping the component in a <code>DefaultProps</code> tag.

In functional components, default props are set by giving default values in the parameter list.

Can default props be overridden by passing a prop value?

A Yes, passed props always override default props.

B No, default props cannot be changed.

C Only if the prop is a string.

D Only if the component is a class component.

Props passed to a component override any default props set.

Which of these is a benefit of using default props?

A Prevents components from rendering.

B Makes components slower.

C Requires more code to write.

D Avoids errors when props are missing.

Default props provide fallback values, preventing errors if props are missing.

What is the default prop value for name in this component?<br>

function Welcome({ name = 'Guest' }) { return <p>Hi, {name}!</p> }

A undefined

B 'Guest'

C null

D Empty string

The default value for name is set to 'Guest' in the function parameter.

Explain what default props are in React and why they are useful.

Think about what happens when a prop is missing.

Describe how to set default props in a React functional component with an example.

Use ES6 syntax for function parameters.