How to access props in function? - reactjs

Question

I have problem with accessing props from function.
Here is my code(the component where all this is contained is also a function):
const [anchorEl, setAnchorEl] = React.useState(null);
function handleClick(event) {
setAnchorEl(event.currentTarget);
}
function handleClose(val) {
setAnchorEl(null);
this.props.updateSelected(val)
}
return (
<div>
<IconButton onClick={handleClick}>
<FilterListIcon/>
</IconButton>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={() => {handleClose(1).bind(this)}}>Содержит текст</MenuItem>
<MenuItem onClick={() => {handleClose(2)}}>Не содержит текст</MenuItem>
<MenuItem onClick={() => {handleClose(3)}}>Начинается с</MenuItem>
<MenuItem onClick={() => {handleClose(4)}}>Заканчивается на</MenuItem>
</Menu>
</div>
I have tried binding as you see but it did't work.
Here is how I pass this prop to the component from another component:
<FilterOptions updateSelected={this.updateSelectedValue}/>
And the prop itself:
updateSelectedValue = async (val) => {
await this.setState({selectedValue: val});
console.log(this.state.selectedValue)
};

Answer 1

You can destructure the prop from the functional component arguments. And since all your other functions are defined inside your component, you can access that prop from anywhere.
I'll give your component a name of Test:
const Test = ({ updateSelected }) => {
const [anchorEl, setAnchorEl] = React.useState(null);
function handleClick(event) {
setAnchorEl(event.currentTarget);
}
function handleClose(val) {
setAnchorEl(null);
updateSelected(val)
}
return (
<div>
<IconButton onClick={handleClick}>
<FilterListIcon/>
</IconButton>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={() => {handleClose(1).bind(this)}}>Содержит текст</MenuItem>
<MenuItem onClick={() => {handleClose(2)}}>Не содержит текст</MenuItem>
<MenuItem onClick={() => {handleClose(3)}}>Начинается с</MenuItem>
<MenuItem onClick={() => {handleClose(4)}}>Заканчивается на</MenuItem>
</Menu>
</div>
}