React JS MCQs 9

Which of the following statements correctly imports React in a JSX file?

• a) import React from 'react'; (Correct Answer)
• b) require('react');
• c) import { React } from 'react';
• d) import React from 'React';

What is the purpose of the following code snippet in a React component?

 import React from 'react';

function MyComponent() {
  return (
    <div>Hello, world!</div>
  );
}

• a) It imports the React library (Correct Answer)
• b) It defines a functional component named MyComponent
• c) It renders a div element with the text "Hello, world!"
• d) All of the above

In React, what is the correct syntax for rendering a JavaScript expression inside JSX?

• a) { var }
• b) {{ var }}
• c) { var } (Correct Answer)
• d) {{ var }}

What will the following React component render?

 import React from 'react';

function MyComponent() {
  const items = ['apple', 'banana', 'orange'];
  return (
    <ul>
      {items.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}

• a) A list of fruits: apple, banana, orange (Correct Answer)
• b) An unordered list with three items: apple, banana, orange
• c) A compilation error
• d) An empty list

In React, which lifecycle method is called immediately after a component is mounted?

• a) componentWillMount()
• b) componentDidMount() (Correct Answer)
• c) componentWillUnmount()
• d) componentDidUpdate()

What is the correct way to pass props to a component in React?

• a) <MyComponent props={data} />
• b) <MyComponent {props} />
• c) <MyComponent {...props} /> (Correct Answer)
• d) <MyComponent props={{data}} />

What is the purpose of the following React code snippet?

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• a) It defines a functional component with a state variable named count that increments on button click (Correct Answer)
• b) It renders a paragraph element with the text "You clicked {count} times"
• c) It renders a button element with the text "Click me"
• d) It imports the useState hook from the React library

In React, what is the purpose of the key attribute when rendering a list of components?

• a) It defines the styling for each component in the list
• b) It specifies the order of the components in the list
• c) It helps React identify which items have changed, are added, or are removed in the list (Correct Answer)
• d) It defines the initial state of each component in the list

What does JSX stand for in React?

• a) JavaScript XML (Correct Answer)
• b) JavaScript Extension
• c) JavaScript XML Syntax
• d) JavaScript Extension Library

In React, what is the purpose of the onClick attribute in a button element?

• a) It defines the button's appearance
• b) It specifies the action to be performed when the button is clicked (Correct Answer)
• c) It triggers the button's hover effect
• d) It determines the button's accessibility properties