What is the output of the following React functional component? JavaScript const ItemList = (props) => { return ( <ul> {props.items.map((item, index) => <li key={index}>{item}</li>)} </ul> ); }; <ItemList items={['Apple', 'Banana', 'Cherry']} />

<ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul>

What will be the output of this React component? JavaScript import React, { useState } from 'react'; const ToggleButton = () => { const [isOn, setIsOn] = useState(false); return ( <button onClick={() => setIsOn(!isOn)}> {isOn ? "ON" : "OFF"} </button> ); }; export default ToggleButton;

The button will toggle between "ON" and "OFF" every time it's clicked.

The button will always show "ON".

The button will always show "OFF".

The component will throw an error because of useState.

Courses
Tutorials
Practice

Functional Components

Here we will cover all the basic concepts of ReactJS like functional components, props and much more.

Last Updated :

Discuss

Comments

Question 1

What are Functional Components in React?

A class-based component
A function that returns JSX
A component that stores state
A component that uses React Hooks

Discuss it

Question 2

What is a key benefit of using Functional Components?

They are more complex and feature-rich
They have better performance than class components
They cannot use hooks
They require more lines of code

Discuss it

Question 3

How do you pass data into Functional Components in React?

Through state only
By using props
By using the useState hook
By using the render method

Discuss it

Question 4

What is a stateless component in React?

A component that uses hooks for state management
A component that doesn't manage or store state
A component that renders its state
A component that only uses class-based syntax

Discuss it

Question 5

Which of the following is a key advantage of writing reusable components in React?

They require more complex code
They allow for code duplication
They make the code more modular and easier to maintain
They don’t accept props

Discuss it

Question 6

What will be the output of the following code?

JavaScript

const Greeting = (props) => {
    return <h1>Hello, {props.name}!</h1>;
};
<Greeting name="Sandeep" />

Hello, Sandeep!
Hello, undefined!
Greeting: Sandeep
Error: props is not defined

Discuss it

Question 7

What is the output of the following React functional component?

JavaScript

const ItemList = (props) => {
    return (
        <ul>
            {props.items.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
    );
};
<ItemList items={['Apple', 'Banana', 'Cherry']} />

Apple Banana Cherry
<ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul>
Apple, Banana, Cherry
Error: map is not a function

Discuss it

Question 8

What does "props" refer to in the context of React functional components?

A way to manage component state
A built-in function that triggers re-renders
An object used to pass data and event handlers to components
A way to define local component methods

Discuss it

Question 9

What will be the output of the following functional component?

JavaScript

const HelloWorld = () => {
    const [text, setText] = useState("Hello");
    useEffect(() => {
        setText("World");
    }, []);
    return <div>{text}</div>;
};
export default HelloWorld;

Hello
World
Error: Invalid state update
undefined

Discuss it

Question 10

What will be the output of this React component?

JavaScript

import React, { useState } from 'react';
const ToggleButton = () => {
    const [isOn, setIsOn] = useState(false);

    return (
        <button onClick={() => setIsOn(!isOn)}>
            {isOn ? "ON" : "OFF"}
        </button>
    );
};
export default ToggleButton;

The button will toggle between "ON" and "OFF" every time it's clicked.
The button will always show "ON".
The button will always show "OFF".
The component will throw an error because of useState.

Discuss it

Tags:

Web Technologies

ReactJS

React Quiz

There are 10 questions to complete.

Take a part in the ongoing discussion