React JS MCQs 10

What will be the output of the following React component?

 import React from 'react';

const MyComponent = () => {
  const name = "Alice";
  return (
    <div>
      <p>Hello, {name}!</p>
    </div>
  );
};

export default MyComponent;

• a) Hello, Alice! (Correct Answer)
• b) Hello, {name}!
• c) Hello, World!
• d) Hello, React!

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

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

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)

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

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

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

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

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

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