DC-302-Midterm-Quiz

Which of the following is true about the state in ReactJS?

• State is immutable and cannot be changed after being set.

• State can only be used in functional components.

• State can hold data that may change over time and affect the rendering of the component.

• State is used to pass data from a parent component to a child component.

Which of the following is true about ReactJS components?

• A component can return multiple elements without wrapping them in a single container.

• Components in React can only be class-based.

• A React component must be written in JavaScript and cannot use JSX.

• Functional components can use hooks like useState and useEffect to manage state and side effects.

Which statement is true about props in ReactJS?

• Props are mutable and can be changed within the component that receives them.

• Props are used to pass data from a child component to a parent component.

• Props can be passed to components to allow them to be reused with different inputs.

• Props are used to manage the internal state of a component.

What is the correct way to create a functional component in ReactJS?

• function Component { return ( <h1>Hello World!</h1> ); }

• function Component() { return ( <h1>Hello World!</h1> ); }

• const Component = function() { return <h1>Hello World!</h1>; }

• const Component = () => { <h1>Hello World!</h1>; }

Which of the following is the correct way to initialize and update state in a functional component using React Hooks?

• const [count, setCount] = this.state(0);

• const count = useState(0); setCount(count + 1);

• const [count, setCount] = useState(0); setCount(count + 1);

• this.state = { count: 0 }; setCount(count + 1);

Which of the following correctly uses props in a functional React component?

• function Greeting(props) { return <h1>Welcome, {props.name}!</h1>; }

• function Greeting() { return <h1>Welcome, props.name!</h1>; }

• function Greeting(props) { return <h1>Welcome, this.props.name!</h1>; }

• function Greeting(props) { return <h1>Welcome, {name}!</h1>; }

Which of the following is the correct way to handle an event in a ReactJS functional component?

• <button onclick="handleClick()">Click me</button>

• <button onClick={handleClick()}>Click me</button>

• <button onClick={handleClick}>Click me</button>

• <button OnClick={handleClick}>Click me</button>

Which statement is true about event handling in ReactJS?

• Events in React are handled using native HTML event handlers.

• In React, event names are written in lowercase, just like in HTML.

• React uses synthetic events to ensure cross-browser compatibility.

• Event handlers in React must always be written inline within the JSX.

Which of the following is the correct way to pass arguments to an event handler in a ReactJS functional component?

• <button onClick={handleClick(arg1, arg2)}>Click me</button>

• <button onClick={handleClick => (arg1, arg2)}>Click me</button>

• <button onClick={(e) => handleClick(arg1, arg2)}>Click me</button>

• <button onClick={handleClick}>Click me(arg1, arg2)</button>

How can you handle different events (e.g., onClick and onMouseEnter) for the same ReactJS component?

• <button onClick={handleClick()} onMouseEnter={handleMouseEnter()}>Click me</button>

• <button onClick={handleClick} onMouseEnter={handleMouseEnter}>Click me</button>

• <button onClick={() => handleClick();} onMouseEnter={() => handleMouseEnter();}>Click me</button>

• <button onClick={handleClick || handleMouseEnter}>Click me</button>