Pasar una función al componente secundario

Para pasar datos de un componente padre al hijo, podemos pasar una función a un componente hijo como accesorio.

Por ejemplo, podemos escribir lo siguiente:

import React, { useState } from "react";const Counter = ({ parentCallback }) => {
  const [count, setCount] = useState(0);  return (
    <button
      onClick={() => {
        const newValue = count + 1;
        setCount(newValue);
        parentCallback(newValue);
      }}
    >
      Click me {count}
    </button>
  );
};export default function App() {
  const callback = (val) => {
    console.log(val);
  };  return (
    <div>
      <Counter parentCallback={callback} />
    </div>
  );
}

Tenemos el componente Counter que toma la propiedad parentCallback.

En el componente, tenemos el estado de count creado a partir del gancho useState.

Luego tenemos un botón con la devolución de llamada onClick que llama a parentCallback con newValue.

En el componente App, tenemos la función de callback que pasamos al componente Counter como el valor de la propiedad parentCallback.

Ahora, cuando hacemos clic en el botón Click me, deberíamos ver que la función console.log se ejecuta con val siendo el valor que pasamos a parentCallback en Counter.

Conclusión

Podemos enviar datos desde un componente React hijo al componente padre pasando una función del padre al hijo.

Luego, en el componente hijo, podemos llamarlo con los argumentos que queremos para pasar los valores de los argumentos al componente padre.

Gracias por leer. Cualquier duda, puede ponerse en contacto conmigo.