Program: 3 Important concepts of React.
js
A. Write a React program to implement a counter button using React use State hook
Aim: To Write a React program to implement a counter button using React use State hook
Program:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
const decrement = () => {
setCount(count - 1);
};
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}
export default Counter;
Output:
Counter: 0
Increment Decrement
Result:
Hence above code is Executed Successfully.
[Link] a React program to fetch the data from an API using React use Effect hook.
Aim: To Write a React program to fetch the data from an API using React use Effect hook.
Program:
import React, { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('[Link] // Example API
if (![Link]) {
throw new Error(`HTTP error! status: ${[Link]}`);
}
const result = await [Link]();
setData(result);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};
fetchData();
}, []); // Empty dependency array means this runs once on mount
if (loading) return <div>Loading data...</div>;
if (error) return <div>Error: {[Link]}</div>;
return (
<div>
<h2>Fetched Data:</h2>
<pre>{[Link](data, null, 2)}</pre>
</div>
);
}
export default DataFetcher;
Output:
Fetched Data:
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}
Result:
Hence above code is Executed Successfully.
[Link] a React program with two react components sharing data using Props.
Aim: To Write a React program with two react components sharing data using Props.
Program:
import React from 'react';
// Child Component
function ChildComponent(props) {
return (
<div>
<h3>Child Component</h3>
<p>Data from Parent: {[Link]}</p>
</div>
);
}
// Parent Component
function ParentComponent() {
const parentMessage = "Hello from Parent!";
return (
<div>
<h2>Parent Component</h2>
<ChildComponent message={parentMessage} />
</div>
);
}
export default ParentComponent;
Output:
Parent Component
Child Component
Data from Parent: Hello from Parent!
Result:
Hence above code is Executed Successfully.
[Link] a React program to implement the forms in react
Aim: To Write a React program to implement the forms in react
Program:
import React, { useState } from 'react';
function MyForm() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const handleSubmit = (event) => {
[Link](); // Prevent default form submission
alert(`Name: ${name}, Email: ${email}`);
// You can send this data to an API or process it further
};
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="name">Name:</label>
<input
type="text"
id="name"
value={name}
onChange={(e) => setName([Link])}
/>
</div>
<div>
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
value={email}
onChange={(e) => setEmail([Link])}
/>
</div>
<button type="submit">Submit</button>
</form>
);
}
export default MyForm;
Output:
Name:
Email:
Submit
Result:
Hence above code is Executed Successfully.
[Link] a React program to implement the iterative rendering using map() function.
Aim:To Write a React program to implement the iterative rendering using map() function.
Program: import React from 'react';
function ItemList() {
const items = ['Apple', 'Banana', 'Cherry', 'Date'];
return (
<div>
<h2>Fruit List</h2>
<ul>
{[Link]((item, index) => (
<li key={index}>{item}</li> // `key` prop is important for performance and stability
))}
</ul>
</div>
);
}
export default ItemList;
Output:
Fruit List
Apple
Banana
Cherry
Date
Result:
Hence above code is Executed Successfully.