venus
venus
Explore posts from servers
RReactifluxTtRPCTTCTheo's Typesafe Cult
PostsComments
RReactiflux
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