Pass setState as props or create a handle

Question

Can I pass the setPlaying as props? Or I have to do something like this example code?

Components Two and Three can be in their own file.

export const myComponent = () => {
  const [playing, setPlaying] = useState(false);

  const handleChange = (show) => {
    setPlaying(show);
  };

  return (
    <>
      <One />
      {!playing ? (
        <Two handleChange={handleChange} />
      ) : (
        <Three handleChange={handleChange} />
      )}
    </>
  ) 
};

const Two = ({ handleChange }) => {
  return (
    <Container>
      <Button onClick={{(e) => handleChange(true)}}>Click to Show Component Three</Button>
    </Container>
  );
};

const Three = ({ handleChange }) => {
  return (
    <Container>
      <Button onClick={{(e) => handleChange(false)}}>Click to Show Component Two</Button>
    </Container>
  );
};

Yes you definitely can do it. – Tony Nguyen Jun 26 '20 at 15:04 — Tony Nguyen, Jun 26 '20 at 15:04

score 1 · Accepted Answer · answered Jun 26 '20 at 16:18

1

Of course. Wrapping setPlaying with handleChange is advantageous if you wish to do any further processing in myComponent. And the conditional rendering will prevent needless re-renders.

answered Jun 26 '20 at 16:18

Charles Goodwin

584
5
8

score 0 · Answer 2 · answered Jun 26 '20 at 15:53

0

Yes, you can do that. Also, it is a good practice that you did with the handler.

ref: Passing setState to child component using React hooks

answered Jun 26 '20 at 15:53

Bartek Smagacz

140
1
5

Pass setState as props or create a handle

2 Answers2

Linked