Tengo un componente secundario que tiene un botón Guardar. Sin embargo, solo puedo definir la función de guardar dentro del componente principal. Necesito pasar la función como accesorio al componente secundario junto con sus parámetros. Todos los métodos que encontré usan .this, renders y constructores. Necesito una forma de usar las funciones de reacción modernas.
export function childComponent (props) { let { handleSave, item, list } = props; return ( //Saves item in list <button className="palletSaveButton" onClick={handleSave(item, list)}> Save </button> ) } const ParentComponent = () => { let list = [{...}]; let item = {...}; function handleSaveClick(item, list) { list.push(item) } return ( <childComponent handleSave={() => handleSaveClick(item, list)} /> ); }La dificultad es entender si desea que la list y el item sean SIEMPRE del Padre como fuente de verdad, o si está tratando de pasar esas variables DEL hijo AL padre.
export function childComponent ({handleSave}) { return ( //Saves item in list <button className="palletSaveButton" onClick={handleSave}> Save </button> ) } const ParentComponent = () => { let list = [{...}] let item = {...} function handleSaveClick() { list.push(item) } return ( <childComponent handleSave={handleSaveClick} /> ); }Si simplemente está buscando hacer clic en un botón en el elemento secundario, y la lógica/los valores se almacenan en el elemento principal, esto debería resolver su problema. Pero tengo la sensación de que está tratando de manipular las variables del niño y enviarlas al padre.