I have a parent and one child component. The parent passes setState to the child as props.

<SkillFunc handleChange={this.setState.bind(this)} />

Here's how the child uses it

props.handleChange({rating: count});

The problem is that doing this causes a blank page. Nothing renders, completely white. The error in the console is (There's nothing above.):

The above error occurred in the <SkillFunc> component:

at SkillFunc (webpack-internal:///./components/common/components/skillFunc.tsx:26:70)

In line 26,

var _React$useState = react__WEBPACK_IMPORTED_MODULE_1___default().useState({
0: true,
1: true,
2: true,
3: true,
4: true

}),

But I assume it meant this:

const [ratings, setRatings] = React.useState(
    {
        0: true,
        1: true,
        2: true,
        3: true,
        4: true
    }
);

I tried to pass {console.log} as props to SkillFunc and it worked perfectly. It only happens when I use the setState. I don't really know how to fix this. Grateful for any help.

Edit: I have solved it by putting the props.handleChange inside the function which gets called when the component state changes.