R
Reactiflux

react-forum

Is it possible to avoid prop drilling in this scenario?

Vvenus9/11/2022
Hello, is it possible to reset the input text from top level component Main other way than just prop drilling input text state from Main component?
const Main = () => {
return (
<>
<button onClick={() => {}}>Reset Input</button>
<SearchInput onValueChange={(v) => {}} />
</>
);
};

export const SearchInput = ({ onValueChange }) => {
const [text, setText] = useState('');
const [value] = useDebounce(text, 300);

useEffect(() => onValueChange(value), [value]);

return (
<input type="text" value={text} onChange={(e) => setText(e.target.value)} />
);
};
const Main = () => {
return (
<>
<button onClick={() => {}}>Reset Input</button>
<SearchInput onValueChange={(v) => {}} />
</>
);
};

export const SearchInput = ({ onValueChange }) => {
const [text, setText] = useState('');
const [value] = useDebounce(text, 300);

useEffect(() => onValueChange(value), [value]);

return (
<input type="text" value={text} onChange={(e) => setText(e.target.value)} />
);
};
UUUnknown User9/16/2022
4 Messages Not Public
Sign In & Join Server To View

Looking for more? Join the community!

Want results from more Discord servers?
Add your server