8

I'd like to change the props using react hooks, and I found the way passing setState function as props to the child.

Container.tsx

const Container: React.FC = () => {
  const [num, setNum] = useState(0);
  return <Counter num={num} setNum={setNum} />;

};

Counter.tsx

interface CounterProps {
  num: number;
  setNum: React.Dispatch<React.SetStateAction<number>>;
}

const Counter: React.FC<CounterProps> = ({ num, setNum }) => {
  const handleClick = () => {
    setNum(num + 1);
  };

  return (
    // jsx codes...
  );
};

It works well, but I have to add two props to the child component per one state of the parent. Is there a more efficient way for this problem?

SuleymanSah
  • 17,153
  • 5
  • 33
  • 54
Simon Park
  • 694
  • 1
  • 7
  • 18

2 Answers2

10

This is the correct way of doing it. There are two ways of condensing this if needed.

First is to just pass a tuple instead of two separate props.

const Container: React.FC = () => {
  const [num, setNum] = useState(0);
  return <Counter numState={[num, setNum]} />
};

interface CounterProps {
  numState: [number, React.Dispatch<React.SetStateAction<number>>];
}

const Counter: React.FC<CounterProps> = ({ numState: [num, setNum] }) => {
  const handleClick = () => {
    setNum(num + 1);
  };
};

or do it more cleanly by passing an object with the keys 'state' and 'setter' or something similar.

Secondly, if you find that you're using this sort of thing a lot, then you might want to invest some time into setting up a global state management system like Redux.

ManavM
  • 2,918
  • 2
  • 20
  • 33
0

This can be simplified even further now, since TypeScript 2.8 added ReturnType, by obtaining the return type of the useState hook.

interface CounterProps {
    numState: ReturnType<typeof useState<number>>
}

const Counter = ({ numState: [num, setNum] }: CounterProps) => {
    const handleClick = () => {
        setNum(num + 1)
    }
}
andyb
  • 43,435
  • 12
  • 121
  • 150