Scribd
Upload
16 views

Activity 10 OCT

Uploaded by

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

Activity 10 OCT

Uploaded by

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

./components/ShoppingForm.

js

import React, { useContext, useMemo, useCallback } from 'react';

import useInput from './UseInput';

import { ShoppingListContext } from './ShoppingListContext';

const ShoppingForm = () => {

const { addItem } = useContext(ShoppingListContext);

const itemInput = useInput('');

const handleSubmit = useCallback((e) => {

e.preventDefault();

if (itemInput.value.trim()) {

addItem(itemInput.value.trim());

itemInput.reset();

}, [addItem, itemInput]);

const isDisabled = useMemo(() => !itemInput.value.trim(),


[itemInput.value]);

return (

<form onSubmit={handleSubmit}>

<input

type="text"

placeholder="Add item"

value={itemInput.value}

onChange={itemInput.onChange}

/>

<button type="submit" disabled={isDisabled}>


Add

</button>

</form>

);

};

export default ShoppingForm;

./components/ShoppingList.js

import React, { useContext, useState } from 'react';

import { ShoppingListContext } from './ShoppingListContext';

const ShoppingList = () => {

const { shoppingList, filterItems } = useContext(ShoppingListContext);

const [filter, setFilter] = useState('');

const filteredItems = filterItems(filter);

return (

<div>

<input

type="text"

placeholder="Filter items"

value={filter}

onChange={(e) => setFilter(e.target.value)}

/>

<ul>

{filteredItems.map((item, index) => (

<li key={index}>{item}</li>
))}

</ul>

</div>

);

};

export default ShoppingList;

./components/ShoppingListContext.js

import { createContext, useState, useCallback } from 'react';

export const ShoppingListContext = createContext();

export const ShoppingListProvider = ({ children }) => {

const [shoppingList, setShoppingList] = useState([]);

const addItem = useCallback((item) => {

setShoppingList((prevList) => [...prevList, item]);

}, []);

const filterItems = useCallback((query) => {

return shoppingList.filter((item) =>

item.toLowerCase().includes(query.toLowerCase())

);

}, [shoppingList]);

return (

<ShoppingListContext.Provider value={{ shoppingList, addItem,


filterItems }}>
{children}

</ShoppingListContext.Provider>

);

};

./components/UseInput.js

import { useState } from 'react';

const useInput = (initialValue = '') => {

const [value, setValue] = useState(initialValue);

const handleChange = (e) => {

setValue(e.target.value);

};

const reset = () => {

setValue('');

};

return {

value,

onChange: handleChange,

reset,

};

};

export default useInput;


./components/Usememo.js

import { useState } from 'react';

const useInput = (initialValue = '') => {

const [value, setValue] = useState(initialValue);

const handleChange = (e) => {

setValue(e.target.value);

};

const reset = () => {

setValue('');

};

return {

value,

onChange: handleChange,

reset,

};

};

export default useInput;

./App.js

import './App.css';

import { ShoppingListProvider } from './components/ShoppingListContext';

import ShoppingForm from './components/ShoppingForm';

import ShoppingList from './components/ShoppingList';


function App() {

return (

<div className="App">

<ShoppingListProvider>

<h1>Shopping List</h1>

<ShoppingForm />

<ShoppingList />

</ShoppingListProvider>

</div>

);

export default App;

You might also like