How to pass data in react js inside a file - reactjs

Question

I have the next component in ReactJs:
function App() {
function handleClick(e) {
console.log('click ', e);
localStorage.setItem('my-item', e.key);
console.log(localStorage.getItem('my-item'))
}
return (
<div>
<Menu
selectedKeys={e.key}
style={{ width: 500px}}
onClick={handleClick}
>
...another code
}
There i used AntDesign. The function handleClick write in my localstorage the key of an item. It works, but i want to pass in selectedKeys the key that i passed in the localstorage, so i want to do this selectedKeys={e.key}, but i can't do this. How to pass the data e.key from the function to<Menu> tag?

Answer 1

What about using a state :
With the React hook useState :
import React, { useState } from React;
then
const [selectedKeys, setSelectedKeys] = useState([]);
then
function handleClick(key) {
localStorage.setItem('my-item', key);
let newKeys = selectedKeys.slice(0); // you may need to clone the array
newKeys.push(key);
setSelectedKeys(newKeys); // or push it into an array if there is many.
}
your Menu component would then look like :
<Menu
mode="inline"
selectedKeys={selectedKeys}
openKeys={openKeys}
onOpenChange={onOpenChange}
style={{ width: 500px}}
onClick={() => handleClick(e.key)}>
All together :
import React, { useState } from React;
const App = () => {
const [selectedKeys, setSelectedKeys] = useState([]);
const handleClick = (key) => {
localStorage.setItem('my-item', key);
let newKeys = selectedKeys.slice(0); // you may need to clone the array
newKeys.push(key);
setSelectedKeys(newKeys); // or push it into an array if there is many.
}
return {
<Menu
mode="inline"
selectedKeys={selectedKeys}
openKeys={openKeys}
onOpenChange={onOpenChange}
style={{ width: 500px}}
onClick={() => handleClick(e.key)}>
}
}

Answer 2

Make it a class component and in the state make an attribute of selected key and in the handleClick do set the state and assign the selectedKey value from the state in the Menu tag. Thats the proper way of doing it.
import React, { Component } from 'react';
class App extends Component {
constructor(props){
super(props);
this.state = {
selectedKey: null
};
}
handleClick = (e) => {
console.log('click ', e);
this.setState({
selectedKey: e.key
});
localStorage.setItem('my-item', e.key);
console.log(localStorage.getItem('my-item'));
}
render () {
return (
<div>
<Menu
selectedKeys={this.state.selectedKey}
style={{ width: 500px}}
onClick={handleClick}
>
...another code
}
}

Answer 3

Use an arrow function:
onClick={() => handleClick(e.key)}
In your code:
handleClick = key => {
console.log("the key is:", key);
localStorage.setItem('my-item', key);
console.log(localStorage.getItem('my-item'))
}
<Menu
selectedKeys={e.key}
style={{ width: 500px}}
onClick={() => handleClick(e.key)}>