Scribd
Upload
21 views1 page

UseState Example

The document contains two React components: a Counter that increments a count value and displays it, and a Lightbulb that toggles between on and off states. Both components utilize the useState hook to manage their respective states. Each component includes a button to trigger the state changes.

Uploaded by

sujithirasujisuji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
21 views1 page

UseState Example

The document contains two React components: a Counter that increments a count value and displays it, and a Lightbulb that toggles between on and off states. Both components utilize the useState hook to manage their respective states. Each component includes a button to trigger the state changes.

Uploaded by

sujithirasujisuji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

1) Counter App

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0); // Initialize state with 0

const increment = () => {


setCount(count + 1); // Update state
};

return (
<div>
<h1>Count: {count}</h1>
<button onClick={increment}>Increment</button>
</div>
);
}

export default Counter;

2) Bulb ON/OFF

import { useState } from 'react';

function Lightbulb() {
const [isOn, setIsOn] = useState(false); // Initial state is 'off'

const toggleLight = () => {


setIsOn(!isOn); // Toggle between true and false
};

return (
<div>
<h1>The light is {isOn ? "ON" : "OFF"}</h1>
<button onClick={toggleLight}>
{isOn ? "Turn Off" : "Turn On"}
</button>
</div>
);
}

export default Lightbulb;

You might also like