[vc_row el_class=”blog-info”][vc_column][vc_single_image source=”featured_image” img_size=”full” style=”vc_box_rounded”][vc_empty_space height=”40px”][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text el_class=”font-weight-bold”]

Cómo enviar datos desde un componente secundario al componente principal en React

A veces, en nuestra aplicación React, tenemos que enviar datos desde un componente secundario a su componente principal.

En este artículo, veremos cómo enviar datos desde un componente secundario de React a su principal.

[/vc_column_text][vc_empty_space height=”40px”][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

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.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_class=”social-info”][vc_column width=”1/6″][/vc_column][vc_column width=”2/3″][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text][social_share_button themes=’theme1′][/vc_column_text][/vc_column_inner][vc_column_inner el_class=”youtube-inner-col” width=”1/2″][vc_column_text][likebtn theme=”youtube” lang=”auto” show_like_label=”0″ white_label=”1″ alignment=”right”][/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner el_class=”social-info-inner”][vc_column_inner width=”1/4″][vc_single_image image=”921″][/vc_column_inner][vc_column_inner width=”3/4″][vc_column_text]

Diego Pacheco

Ingeniero en Sitemas, MBA (Babson College). Desarrollador PHP/Java/JavaScript. Fundador & CEO de EpicStudio. Entusiasta de las tecnologías web (JavaScript, Vue, Laravel, AWS, Docker) Viajes, Negocios, Surf y Growth.[/vc_column_text][asvc_list_item icon_fontawesome=”fa fa-calendar-o” icon_size=”14px”]Programar una reunión[/asvc_list_item][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Componente secundario al principal en React

Cómo enviar datos desde un componente secundario al componente principal en React

Pasar una función al componente secundario

Conclusión

Diego Pacheco

Recent Post