Scribd
Upload
5 views

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
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

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
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