He seguido este tutorial ( https://www.freecodecamp.org/news/pass-data- between-components-in-react/ ) lo mejor que he podido, pero sigo teniendo problemas.
Estoy teniendo el siguiente error:
Uncaught TypeError: childToParent is not a function"Aquí está la función principal:
function App() { const childToParent =(value) => {console.log(value)} ... return ( ... <SelectHours value={state.selectedHour} childToParent={childToParent}></SelectHours> ... )y la función hijo:
export default function SelectHours(selectedHours, childToParent) { .... return ( <Select labelId="select-demo" id='select-demo' defaultValue="" //onChange={event => handleChange(event.target.value, true)} value={workHours[0] ? workHours[0] : ""} > { workHours.map((value, index) => { return ( <MenuItem value={value ? value : ""} key={index} onClick={() => childToParent(value)} > {value} </MenuItem> ) }) } </Select> ) .... }Debe agregar sus llaves para que Reaccione pueda decir que es un accesorio.
export default function SelectHours({selectedHours, childToParent}) { .... return ( <Select labelId="select-demo" id='select-demo' defaultValue="" //onChange={event => handleChange(event.target.value, true)} value={workHours[0] ? workHours[0] : ""} > { workHours.map((value, index) => { return ( <MenuItem value={value ? value : ""} key={index} onClick={() => childToParent(value)} > {value} </MenuItem> ) }) } </Select> ) .... }debe destruir accesorios como este.
export default function SelectHours({selectedHours, childToParent})o usar accesorios como este
export default function SelectHours(props) ... onClick={() => props.childToParent(value)}lea sobre la desestructuración de objetos en este artículo
Debe tener un controlador para ChildToParent dentro
function App() { ... const childToParent =(value) => {console.log(value)} return ( ... <SelectHours value={state.selectedHour} childToParent={childToParent}></SelectHours> ... )el componente de la aplicación