Tengo una función que crea una lista desplegable usando kendo reaccionar desde una lista 'lista'. Cada elemento de la lista es un diccionario con una clave 'Región' y un valor 'Mosaico'.
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; Para crear y actualizar otro componente en mi archivo App.js, necesito pasar la variable state.value.Tile , que es el 'Mosaico' del elemento seleccionado en la lista desplegable, en la función Menú, a otro componente en App.js. El problema es que no sé cómo llamar o extraer esta variable de la función Menú.
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;Básicamente soy nuevo en React, así que he tenido problemas y no entiendo varias cosas, cualquier ayuda que me puedan brindar será apreciada.
// 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;