venus Posts - Reactiflux

venus

•Created by venus on 9/11/2022 in #react-forum

Is it possible to avoid prop drilling in this scenario?

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)} />
  );
};

5 replies