const Rating = props => {

    const [rating, setRating] = React.useState(props.defaultValue);

 

    React.useEffect(() => {

        props.onRating(rating);

    }, [rating]);

 

    return (

        <div>

            {new Array(props.max).fill(0).map((_, index) => (

                <span

                    key={index}

                    onClick={

                        !props.readonly ? setRating.bind(null, index + 1) : null

                    }

                >

                    {index < rating ? (

                        <Star disable={props.readonly} />

                    ) : (

                        <UnfilledStar disable={props.readonly} />

                    )}

                </span>

            ))}

        </div>

    );

};

 

const App = () => {

    const handleRating = rating => {

        console.log(rating);

    };

    return (

        <div>

            <p>Rating</p>

            <Rating defaultValue={3} onRating={handleRating} />

        </div>

    );

};

 

ReactDOM.render(<App />, document.querySelector('#root'));

Warning: State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().