I have a function that creates a Dropdown list using kendo react from a list 'lista'. Each element of the list is a dictionary with a key 'Region' and a value 'Tile'.
function Menu (Auser){
let lista = []
// Here I have a series of loops that read lista and tiles using a command similar to lista.push({Region:users.userList[i].locations[j].region, Tile:users.userList[i].locations[j].tile});
const [state, setState] = useState({
value: lista[0],
});
const handleChange = (event) => {
setState({
value: event.target.value,
});
}
return (
<form>
<p>Avaliable regions</p>
<div>
Selected Value: {JSON.stringify(state.value.Tile)} // Here I print my variable of interest
</div>
<DropDownList className="dropdown-content" data={lista}
textField="Region"
dataItemKey="Tile"
value={state.value}
onChange={handleChange}
/>
</form>
);
}
export default Menu;
In order to create, and update, another component in my App.js file, I need to pass the variable state.value.Tile which is the 'Tile' of the element selected in the Dropdown list, in the Menu function, to another component in App.js. The problem is that I don't know how to call or extract this variable from the Menu function.
import Menu from './components/menu';
import SecondElement from './components/secondelement';
class App extends Component { // This is an example of my structure
render (){
return (
<header className="App-header">
<h3>
Hello world!
</h3>
<Menu Auser={user.attributes.name}/>
<SecondElement SelectedTile={state.value.Tile}/> // I should be able to put the variable state.value.Tile, from the Menu function here.
)}
</Authenticator>
);
}
}
export default App;
I am basically new to React so I've been having problems and I don't understand several things, any help you can give me will be appreciated.
// App.JS
import {useEffect} from 'react';
import Menu from './components/menu';
import SecondElement from './components/secondelement';
class App = (props) { // This is an example of my structure
const [selectedTile, setSelectedTile] = useEffect(null);
OnTileUpdated = (tile) => setSelectedTile(tile)
return (
<header className="App-header">
<h3>
Hello world!
</h3>
<Menu handleTile={onTileUpdated} Auser={user.attributes.name}/>
<SecondElement SelectedTile={selectedTile}/>
)}
</Authenticator>
);
}
export default App;
//Menu JS
function Menu ({Auser, handleTile}){
let lista = []
const [state, setState] = useState({
value: lista[0],
});
const handleChange = (event) => {
setState({
value: event.target.value,
});
handleTile(event.target.value)
}
return (
<form>
<p>Avaliable regions</p>
<div>
Selected Value: {JSON.stringify(state.value.Tile)} // Here I print my variable of interest
</div>
<DropDownList className="dropdown-content" data={lista}
textField="Region"
dataItemKey="Tile"
value={state.value}
onChange={handleChange}
/>
</form>
);
}
export default Menu;