React Props Masterclass

Are you truly comfortable with how data flows in React? Props are the lifeblood of React components, yet subtleties in syntax and composition often trip up developers. Test your knowledge with these 6 questions.

Question 1: Props Object Structure

Given the element below, what does the props object look like inside the Navbar component?

jsx

<Navbar title="Dashboard" isSticky />

Select the correct answer:

A) { title: "Dashboard", isSticky: "isSticky" }

B) { title: "Dashboard", isSticky: true }

C) { title: "Dashboard", isSticky: undefined }

D) ["Dashboard", true]

Question 2: What's Technically Wrong?

What is technically wrong with this code?

jsx

<Modal
  isOpen={true}
  onClose={() => setIsOpen(false)}
  overlay={<div className="backdrop" />}
  config={{
    animation: "fade-in",
    duration: 300
  }}
/>

Select the correct answer:

A) Nothing

B) overlay cannot be a JSX element

C) config has too many curly braces

D) isOpen must be a string

Question 3: Required Prop Value

Inside the FormInput component, what does props.required equate to?

jsx

<FormInput required />

Select the correct answer:

A) null

B) "required"

C) undefined

D) true

Question 4: What Will Cause an Error?

What will cause an error in this code?

jsx

<Card
  title={`Project: ${id}`}
  actions={() => <button>Edit</button>}
  style={
    backgroundColor: "white",
    borderRadius: "8px",
    padding: "20px"
  }
/>

Select the correct answer:

A) Nothing

B) actions cannot be a function

C) style is missing curly braces

D) title is using invalid syntax

Question 5: Children Data Type

In the component definition below, what data type is children?

jsx

const Grid = ({ children }) => {
  return (
    <div className="grid-container">
      {children}
    </div>
  )
}

Select the correct answer:

A) An Array

B) A React Element (Object)

C) We don't know yet

D) undefined

Question 6: Children as Wrapper

True or False: A component with a children prop essentially acts as a "frame" or "wrapper" that leaves a hole for the parent component to fill with content.

True or False?

A) True

B) False