R
Reactiflux

react-forum

Is it possible to avoid prop drilling in this scenario?

Vvenus
View on Discord
9/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 User
View on Discord
9/16/2022
4 Messages Not Public
Sign In & Join Server To View

Looking for more? Join the community!

R
Reactiflux

react-forum

Join Server
Want results from more Discord servers?
Add your server