React & Redux Complete Course (2024)
with Projects
import React from 'react';
const MyComponent = () => {
// Define a function to handle the click event
const handleClick = () => {
[Link]('Button clicked!');
};
return (
<div>
{/* Attach the handleClick function to the onClick event of the
button */}
<button onClick={handleClick}>Click me!</button>
</div>
);
};
export default MyComponent;
onChange
import React, { useState } from 'react';
const MyComponent = () => {
// Define a state variable to hold the input value
const [inputValue, setInputValue] = useState('');
// Define a function to handle the change event
const handleChange = (event) => {
// Update the state with the new input value
setInputValue([Link]);
};
return (
<div>
{/* Attach the handleChange function to the onChange event of the
input */}
<input
type="text"
value={inputValue}
onChange={handleChange}
placeholder="Type something..."
/>
{/* Display the input value */}
<p>You typed: {inputValue}</p>
</div>
);
};
export default MyComponent;
[Link]
import FoodInput from "./Component/FoodInput";
import ErrorMessage from "./Component/ErrorMessage";
import 'bootstrap/dist/css/[Link]';
import "./[Link]";
import FoodItems from "./Component/FoodItems";
import Container from "./Component/Container";
import { useState } from "react";
function App() {
// let [foodItems, setFoodItems] = useState(["sabgi", "roti", "green" ]);
let [foodItems, setFoodItems] = useState([]);
const onKeyDown = (event) => {
if ([Link] === "Enter") {
let newFoodItem = [Link];
[Link] = "";
let newItems = [...foodItems, newFoodItem];
setFoodItems(newItems);
}
};
return (
<>
<Container>
<h1 className="food-heading">Healthy Food</h1>
<FoodInput handleKeyDown={onKeyDown}></FoodInput>
<ErrorMessage items={foodItems}></ErrorMessage>
<FoodItems items={foodItems}></FoodItems>
</Container>
</>
);
}
export default App;
[Link]
import styles from "./[Link]";
const Container = ({ children }) => {
return <div className={[Link]}>{children}</div>;
};
export default Container;
[Link]
import styles from "./[Link]";
const FoodInput = ({ handleKeyDown }) => {
return (
<input
type="text"
placeholder="Enter Food Item here"
className={[Link]}
onKeyDown={handleKeyDown}
/>
);
};
export default FoodInput;
[Link]
import Container from "./Container";
const ErrorMessage = ({ items }) => {
return <>
{/* <Container> */}
{[Link] === 0 && <h3>I am still hungry.</h3>}
{/* </Container> */}
</>;
};
export default ErrorMessage;
[Link]
import { useState } from "react";
import Item from "./Item";
const FoodItems = ({ items }) => {
let [activeItems, setActiveItems] = useState([]);
let onBuyButton = (item) => {
[Link](item);
// const handleBuyButton = (item) => {
let newItems = [...activeItems, item];
setActiveItems(newItems);
// let active = ture;
};
return (
<ul className="list-group">
{[Link]((item) => (
<Item
key={item}
foodItem={item}
bought={[Link](item)}
// bought={true}
// handleBuyButton={onBuyButton}
// handleBuyButton={()=> onBuyButton(item)}
handlerBuyButton={()=>onBuyButton(item)}
></Item>
))}
</ul>
);
};
export default FoodItems;
[Link]
import React from 'react'
import styles from "./[Link]"
function Item({foodItem, handlerBuyButton, bought }) {
return (
<li
// className={`${styles["kg-item"]} list-group-item`}
className={`${styles["kg-item"]} list-group-item ${bought && "list-group-
item active"}`}
>
<span className={styles["kg-span"]}>{foodItem}</span>
<button
className={`${[Link]} btn btn-info`}
onClick={()=>handlerBuyButton(foodItem)}
>
Buy
</button>
</li>
)
}
export default Item;
[Link]
[Link]
