Create New Post

React JS MCQs 9

  1. 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';
  2. 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
  3. In React, what is the correct syntax for rendering a JavaScript expression inside JSX?

    • a) { var }
    • b) {{ var }}
    • c) { var } (Correct Answer)
    • d) {{ var }}
  4. 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
  5. In React, which lifecycle method is called immediately after a component is mounted?

    • a) componentWillMount()
    • b) componentDidMount() (Correct Answer)
    • c) componentWillUnmount()
    • d) componentDidUpdate()
  6. 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}} />
  7. 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
  8. 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
  9. What does JSX stand for in React?

    • a) JavaScript XML (Correct Answer)
    • b) JavaScript Extension
    • c) JavaScript XML Syntax
    • d) JavaScript Extension Library
  10. 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

Comments

Leave a Reply

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

23593