What will the following code display on the screen? JavaScript const [isVisible, setIsVisible] = useState(false); const toggleVisibility = () => { setIsVisible(!isVisible); }; return ( <div> {isVisible && <p>Content is visible!</p>} <button onClick={toggleVisibility}>Toggle Visibility</button> </div> );

Content is visible! only appears when the button is clicked

Content is visible! always visible

What will be the result of the following code? JavaScript const [name, setName] = useState("John"); const handleChange = (e) => { setName(e.target.value); }; return ( <div> <input type="text" value={name} onChange={handleChange} /> <p>{name}</p> </div> );

The input value updates dynamically and displays below the input

The input field doesn’t update when typed

What will be the value of counter after clicking the button in the following code? JavaScript const [counter, setCounter] = useState(0); const increment = () => { setCounter((prevCounter) => prevCounter + 1); }; return ( <div> <p>{counter}</p> <button onClick={increment}>Increment</button> </div> );

counter will increment correctly by 1

Given the following component, what is the correct way to update the state in response to a button click? JavaScript import React, { useState } from "react"; const Counter = () => { const [count, setCount] = useState(0); return ( <div> <p>{count}</p> <button>Increment</button> </div> ); };

setCount(count + 1); inside the onClick handler

useState(count + 1); inside the onClick handler

setCount({ count: count + 1 }); inside the onClick handler

count = count + 1; inside the onClick handler

Tutorials
Courses
Go Premium

State in React

Test your knowledge of React state management with this engaging quiz covering key concepts like the useState hook, props vs. state, and component re-rendering!

Last Updated :

Discuss

Comments

Question 1

What happens when setState is called in React?

React immediately updates the state and re-renders the component synchronously
React schedules an update and may batch multiple setState calls together
React ignores the call if the new state value is the same as the current one
Both b and c

Discuss it

Question 2

How can you define state in a React component using hooks?

const [state, setState] = useState();
const state = useState();
useState(state);
setState(state)

Discuss it

Question 3

What will the following code display on the screen?

JavaScript

const [isVisible, setIsVisible] = useState(false);

const toggleVisibility = () => {
    setIsVisible(!isVisible);
};

return (
    <div>
        {isVisible && <p>Content is visible!</p>}
        <button onClick={toggleVisibility}>Toggle Visibility</button>
    </div>
);

Content is visible! always visible
Content is visible! only appears when the button is clicked
No content is displayed
The button doesn’t work

Discuss it

Question 4

What will be the result of the following code?

JavaScript

const [name, setName] = useState("John");
const handleChange = (e) => {
    setName(e.target.value);
};

return (
    <div>
        <input type="text" value={name} onChange={handleChange} />
        <p>{name}</p>
    </div>
);

The input value is always John
The input field doesn’t update when typed
The input value updates dynamically and displays below the input
React throws an error

Discuss it

Question 5

What is the difference between props and state in React?

Props are mutable, while state is immutable.
Props are used for communication between components, while state is used to control the behavior of a component.
Props can only be changed inside a component, while state can be passed down.
Props are only used for class components, while state is only used for functional components.

Discuss it

Question 6

What type of data structure is state in React?

Immutable object
Mutable object
Singleton object
Global object

Discuss it

Question 7

What will be the value of counter after clicking the button in the following code?

JavaScript

const [counter, setCounter] = useState(0);

const increment = () => {
    setCounter((prevCounter) => prevCounter + 1);
};

return (
    <div>
        <p>{counter}</p>
        <button onClick={increment}>Increment</button>
    </div>
);

counter will always be 0
counter will increment correctly by 1
counter will remain unchanged
React will throw an error

Discuss it

Question 8

What is a common issue when updating state in React?

Multiple state updates may batch together in React
State updates are synchronous by default
Updating state always triggers a full application reload
State can only be updated with numbers or strings

Discuss it

Question 9

Given the following component, what is the correct way to update the state in response to a button click?

JavaScript

import React, { useState } from "react";

const Counter = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>{count}</p>
            <button>Increment</button>
        </div>
    );
};

setCount(count + 1); inside the onClick handler
useState(count + 1); inside the onClick handler
setCount({ count: count + 1 }); inside the onClick handler
count = count + 1; inside the onClick handler

Discuss it

Question 10

In this React component, what will happen when the increment function is called?

JavaScript

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

const increment = () => {
    setCount(count + 1);
    setCount(count + 2);
};

return (
    <div>
        <button onClick={increment}>Increment</button>
    </div>
);

count will increase by 3
count will increase by 2
count will stay 0
It will cause an error

Discuss it

Tags:

Web Technologies

ReactJS

React Quiz

There are 10 questions to complete.

Take a part in the ongoing discussion