Create New Post

React JS MCQs 10

  1. What will be the output of the following React component?

     import React from 'react';
    const MyComponent = () => {
      const name = "Alice";
      return (
          <p>Hello, {name}!</p>
    export default MyComponent;
    • a) Hello, Alice! (Correct Answer)
    • b) Hello, {name}!
    • c) Hello, World!
    • d) Hello, React!
  2. How can you conditionally render elements in React?

    • a) Using the if-else statement inside the JSX
    • b) Using the ternary operator inside the JSX (Correct Answer)
    • c) Using the switch-case statement inside the JSX
    • d) Using the while loop inside the JSX
  3. What is the purpose of the useState hook in React?

    • a) To fetch data from an API
    • b) To manage component state (Correct Answer)
    • c) To handle context within functional components
    • d) To perform side effects in functional components
  4. How can you style a React component?

    • a) Using inline styles with the style attribute
    • b) Using external CSS files
    • c) Using CSS-in-JS libraries like styled-components
    • d) All of the above (Correct Answer)
  5. What is the correct way to handle form input in React?

    • a) Using the value attribute for controlled components (Correct Answer)
    • b) Using the defaultValue attribute for controlled components
    • c) Using the onChange event handler for uncontrolled components
    • d) Using the onSubmit event handler for controlled components
  6. What is the purpose of the useEffect hook in React?

    • a) To memoize the result of a function
    • b) To manage component state
    • c) To perform side effects after every render (Correct Answer)
    • d) To subscribe to context changes
  7. How do you define a reusable component in React?

    • a) By creating a function or class that returns JSX (Correct Answer)
    • b) By using a global variable to store the component
    • c) By including HTML code directly in the render method
    • d) By importing a component from an external library
  8. What is the purpose of the map function in JavaScript when used with React components?

    • a) To iterate over an array and return a new array of the same length
    • b) To create a new array with the results of calling a provided function on every element in the calling array (Correct Answer)
    • c) To filter out elements from an array based on a condition
    • d) To sort the elements of an array based on a condition
  9. In React, how do you handle events?

    • a) By passing event handlers as props to child components
    • b) By using synthetic events that wrap native browser events (Correct Answer)
    • c) By using the addEventListener method directly on DOM elements
    • d) By defining event handlers directly in JSX
  10. What is the purpose of the key prop when rendering a list of components in React? - a) To define the styling for each component in the list - b) To specify the order of the components in the list - c) To help React identify which items have changed, are added, or are removed in the list (Correct Answer) - d) To define the initial state of each component in the list


Leave a Reply

Your email address will not be published. Required fields are marked *