Scribd
Upload
11 views2 pages

Acitivity Js

Uploaded by

narasimhabandaru797
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
11 views2 pages

Acitivity Js

Uploaded by

narasimhabandaru797
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/ 2

Acitivity.

js
import React, { useState, useEffect, useContext, useRef, useReducer, useCallback,
useMemo } from 'react';

// Context for managing global state


const TextContext = React.createContext();

const initialState = {
texts: [],
};

// Reducer function for managing text state


function textReducer(state, action) {
switch (action.type) {
case 'ADD_TEXT':
return { texts: [...state.texts, action.payload] };
case 'REMOVE_TEXT':
return { texts: state.texts.filter((_, index) => index !== action.payload) };
default:
return state;
}
}

const TextProvider = ({ children }) => {


const [state, dispatch] = useReducer(textReducer, initialState);

return (
<TextContext.Provider value={{ state, dispatch }}>
{children}
</TextContext.Provider>
);
};

const TextHooks = () => {


const { state, dispatch } = useContext(TextContext);
const [inputText, setInputText] = useState('');
const inputRef = useRef(null);

// Effect to focus on input field when component mounts


useEffect(() => {
inputRef.current.focus();
}, []);

// Memoized value for character count


const totalCharacters = useMemo(() => {
return state.texts.join('').length;
}, [state.texts]);

// Callback to handle adding text


const handleAddText = useCallback(() => {
if (inputText.trim()) {
dispatch({ type: 'ADD_TEXT', payload: inputText });
setInputText('');
}
}, [inputText, dispatch]);

// Callback to handle removing text


const handleRemoveText = (index) => {
dispatch({ type: 'REMOVE_TEXT', payload: index });
};

return (
<div>
<h1>Text Hooks App</h1>
<input
ref={inputRef}
type="text"
value={inputText}
onChange={(e) => setInputText(e.target.value)}
placeholder="Enter text"
/>
<button onClick={handleAddText}>Add Text</button>

<h2>Total Characters: {totalCharacters}</h2>

<ul>
{state.texts.map((text, index) => (
<li key={index}>
{text} <button onClick={() => handleRemoveText(index)}>Remove</button>
</li>
))}
</ul>
</div>
);
};

const Activity = () => (


<TextProvider>
<TextHooks />
</TextProvider>
);

export default Activity;

You might also like