How to Update the parent component when child component updates in React

I have a child component that's basically four checkbox that has values from 1 to 4, so here's my problem, each time the user clicks on one of them it should pass the value to my api and it will return item's based on that value, the problem i'm facing is those i don't know how to pass those values to parent and i want the parent component to update each time the user clicks on one of the checkbox, the componentDidUpdate method works fine in the child component, but it doesn't have any effect on parent component, and here's what i do in child component:

class PriceRange extends React.Component {
    state = {
        checked5: false,
        checked6: false,
        checked7: false,
        checked8: false,
        checked9: false,
        FilterPrice: ''
    }
    componentDidUpdate() {
        localStorage.setItem("FilterPrice", this.state.FilterPrice)
        console.log(localStorage.getItem("FilterPrice"))
    }

    render() {
        const clearFilters = () => {
            this.setState({
                checked5: false,
                checked6: false,
                checked7: false,
                checked8: false,
                checked9: false,
                FilterPrice : null
            });
        }
        return (
            <div className="day-range price-range col-xl-12 col-lg-12 col-md-12 col-sm-6 col-12 ">
                <div className="title">
                    <div className="range">
                        <span>محدوده قیمت</span>
                    </div>
                    <div className="clear" onClick={clearFilters}>
                        <div className="icon">
                            <i className="fa fa-times" aria-hidden="true"></i>
                        </div>
                        <span> حذف فیلترها</span>
                    </div>
                </div>
                <div className="form-group">
                    <Checkbox
                        nativeControlId='5'
                        checked={this.state.checked5}
                        onChange={(e) => {
                            this.setState({
                                checked5: e.target.checked,
                                checked6: false,
                                checked7: false,
                                checked8: false,
                                checked9: false,
                                FilterPrice: 5
                            })

                        }

                        }
                        onClick={this.props.action}
                    />
                    <label htmlFor='5'>کمتر از 100,000 تومان</label>
                </div>
                <div className="form-group">
                    <Checkbox
                        nativeControlId='6'
                        checked={this.state.checked6}
                        onChange={(e) => {
                            this.setState({
                                checked6: e.target.checked,
                                checked5: false,
                                checked7: false,
                                checked8: false,
                                checked9: false,
                                FilterPrice: 6
                            })

                        }

                        }
                        onClick={this.props.action}
                    />
                    <label htmlFor='6'>از 100,000 تومان تا 200,000 تومان</label>
                </div>
                <div className="form-group">
                    <Checkbox
                        nativeControlId='7'
                        checked={this.state.checked7}
                        onChange={(e) => {
                            this.setState({
                                checked7: e.target.checked,
                                checked6: false,
                                checked5: false,
                                checked8: false,
                                checked9: false,
                                FilterPrice: 7
                            })

                        }

                        }
                        onClick={this.props.action}
                    />
                    <label htmlFor='7'>از 200,000 تومان تا 400,000 تومان</label>

                </div>
                <div className="form-group">
                    <Checkbox
                        nativeControlId='8'
                        checked={this.state.checked8}
                        onChange={(e) => {
                            this.setState({
                                checked8: e.target.checked,
                                checked6: false,
                                checked7: false,
                                checked5: false,
                                checked9: false,
                                FilterPrice: 8
                            })
                        }

                        }
                        onClick={this.props.action}
                    />
                    <label htmlFor='8'>از 400,000 تومان تا 600,000 تومان</label>
                </div>
                <div className="form-group">
                    <Checkbox
                        nativeControlId='9'
                        checked={this.state.checked9}
                        onChange={(e) => {
                            this.setState({
                                checked9: e.target.checked,
                                checked6: false,
                                checked7: false,
                                checked8: false,
                                checked5: false,
                                FilterPrice: 9
                            })

                        }

                        }
                        onClick={this.props.action}
                    />
                    <label htmlFor='9'>بیشتر از 600,000 تومان</label>
                </div>

            </div>
        )
    }



}

export default PriceRange;

and what i'm using for the parent component is something like this,

state = {
   priceRange:localStorage.getItem("FilterPrice")
}



componentDidUpdate(){
     if(this.state.priceRange==localStorage.getItem("FilterPrice")){
        console.log("same")

     }else{
         this.setState({priceRange:localStorage.getItem("FilterPrice")})
         console.log(this.state.priceRange)
     }  
}

so basically i have two questions here, how can i pass those values without using localstorage and how can i update the parent component whenever the user clicks on one of checkboxes?