Skip to content
QuiznExam

Components & Props in React Quiz – 15 Questions with Answers

Test your knowledge of React Components and Props with 15 questions covering functional components, JSX, props, passing data, children, reusability, and component communication.

15
Questions
12 min
Time limit
Medium
Difficulty

No sign-up needed · Last updated:

Save your score

At least 8 characters.

Forgot password?

Related quizzes

All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open

  1. 1. What is a React component?

    • A. A database table
    • B. A reusable piece of UI and logic
    • C. A CSS property
    • D. A JavaScript package manager
    Show answer

    B. A reusable piece of UI and logic

    A React component is a reusable building block that can contain UI, logic, and behavior.

  2. 2. Which type of component is most commonly used in modern React?

    • A. Functional component
    • B. HTML component
    • C. CSS component
    • D. Database component
    Show answer

    A. Functional component

    Modern React primarily uses JavaScript functions as components, often called functional components.

  3. 3. Which syntax is commonly used to create a React functional component?

    • A. function Welcome() { return <h1>Hello</h1>; }
    • B. component Welcome() { print 'Hello'; }
    • C. create Welcome() { <h1>Hello</h1> }
    • D. React Welcome() => HTML
    Show answer

    A. function Welcome() { return <h1>Hello</h1>; }

    A React functional component can be defined as a JavaScript function that returns JSX.

  4. 4. What are props in React?

    • A. Properties used to pass data to components
    • B. A method for changing CSS
    • C. A React database
    • D. A replacement for JSX
    Show answer

    A. Properties used to pass data to components

    Props, short for properties, allow data to be passed from a parent component to a child component.

  5. 5. How are props typically accessed inside a functional component?

    • A. Through the props parameter
    • B. Through document.props
    • C. Through window.props
    • D. Through React.state
    Show answer

    A. Through the props parameter

    A functional component receives props as its parameter, which can be accessed using expressions such as props.name.

  6. 6. Which syntax correctly passes a name prop to a component?

    • A. <User name="John" />
    • B. <User props="name: John" />
    • C. <User {name="John"} />
    • D. <User => name="John" />
    Show answer

    A. <User name="John" />

    Props are passed to components using JSX attributes, such as name="John".

  7. 7. How can you pass a JavaScript variable as a prop in JSX?

    • A. <User name="{userName}" />
    • B. <User name={userName} />
    • C. <User name=(userName) />
    • D. <User name:[userName] />
    Show answer

    B. <User name={userName} />

    Curly braces are used in JSX to evaluate JavaScript expressions and pass their values as props.

  8. 8. Can props be directly modified by the child component?

    • A. Yes, props are always mutable
    • B. Yes, using this.props.update()
    • C. No, props should be treated as read-only
    • D. Only string props can be modified
    Show answer

    C. No, props should be treated as read-only

    React components should not directly modify the props they receive. The parent component controls the values passed through props.

  9. 9. What is the purpose of the children prop in React?

    • A. It stores component CSS
    • B. It represents content placed between a component's opening and closing tags
    • C. It stores the component's state
    • D. It creates a new React application
    Show answer

    B. It represents content placed between a component's opening and closing tags

    The children prop contains whatever is placed between a component's opening and closing JSX tags.

  10. 10. Which example correctly uses the children prop?

    • A. <Card>Hello</Card>
    • B. <Card children="Hello" />
    • C. <Card content>Hello</Card>
    • D. <Card value>Hello</Card>
    Show answer

    A. <Card>Hello</Card>

    When content is placed between <Card> and </Card>, React makes that content available to the Card component through the children prop.

  11. 11. Which statement best describes the relationship between parent and child components?

    • A. A child normally passes props to its parent automatically
    • B. A parent can pass data to a child through props
    • C. Components cannot communicate with each other
    • D. Only CSS can pass data between components
    Show answer

    B. A parent can pass data to a child through props

    React commonly uses one-way data flow, where a parent passes data and functions to child components through props.

  12. 12. How can a parent component allow a child component to trigger an action in the parent?

    • A. By passing a callback function as a prop
    • B. By modifying the child's props
    • C. By directly accessing the parent's local variables
    • D. By changing the HTML document
    Show answer

    A. By passing a callback function as a prop

    A parent can pass a function as a prop, allowing the child to call that function and communicate an event or value back to the parent.

  13. 13. Which statement about component names is correct in JSX?

    • A. Component names must always be lowercase
    • B. Component names should normally start with an uppercase letter
    • C. Component names can only contain numbers
    • D. Component names must contain the word React
    Show answer

    B. Component names should normally start with an uppercase letter

    React uses capitalization to distinguish user-defined components such as <UserProfile /> from built-in HTML elements such as <div />.

  14. 14. What is one major benefit of using reusable React components?

    • A. They eliminate the need for JavaScript
    • B. They allow UI and logic to be reused
    • C. They automatically create a database
    • D. They prevent all application errors
    Show answer

    B. They allow UI and logic to be reused

    Reusable components help developers avoid duplication and make applications easier to maintain and organize.

  15. 15. Which code correctly destructures a name prop inside a functional component?

    • A. function User({ name }) { return <h1>{name}</h1>; }
    • B. function User(name[]) { return <h1>name</h1>; }
    • C. function User(props = name) { return <h1>name</h1>; }
    • D. function User([name]) { return <h1>{name}</h1>; }
    Show answer

    A. function User({ name }) { return <h1>{name}</h1>; }

    Object destructuring allows a component to extract individual props directly from the props parameter.