Si estás intentando implementar operaciones CRUD usando endpoints API, capaz vas a enfrentarte con cierta dificultad para manejar data a través de distintos componentes.

O capaz tienes un modal, pero quieres llamarlo o usarlo de otro componente.

Saber como abordar estos escenarios puede ser difícil.

En este tutorial, te mostraré cómo puedes hacerlo.

Cómo pasar datos entre un componente padre y un componente hijo

En primer lugar, vamos a pasar datos entre un componente padre y un componente hijo.

Primero, tendrás que crear dos componentes, uno padre y otro hijo.

import React from 'react'

export default function Padre() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react'

export default function Hijo() {
    return (
        <div>
            
        </div>
    )
}

A continuación, importarás el componente hijo en el componente padre y lo devolverás.

import React from 'react'
import Hijo from './Hijo';

export default function Padre() {
  return (
    <div>
      <Hijo/>
    </div>
  )
}

Luego crearás una función y un botón para activar esa función. Además, crearás un estado utilizando el gancho (hook) useState para gestionar los datos.

import React from 'react'
import Hijo from './Hijo';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Padre() {
  const [datos, estableceDatos] = useState('');
  
  const padreAHijo = () => {
    estableceDatos("Esta es la data del componente Padre al componente Hijo.");
  }
  return (
    <div className="App">
      <Hijo/>
      
      <div>
        <Button primary onClick={() => padreAHijo()}>Clic Padre</Button>
      </div>
    </div>
  )
}

Como puedes ver aquí, estamos llamando a la función padreAHijo al hacer clic en el botón clic Padre. Cuando se hace clic en el botón Padre, se guarda la información, "Estos son los datos del componente Padre al componente Hijo" en la variable datos.

Ahora, vamos a pasar ese estado de datos a nuestros componentes hijos. Puedes hacer esto usando props (propiedades).

Pasa los datos como props cuando llames al componente hijo de la siguiente manera:

<Hijo padreAHijo={datos}/>

Aquí, estamos pasando los datos en el componente hijo como datos.

datos es los datos que debemos pasar, y  padreAHijo es el nombre del prop.

A continuación, es el momento de capturar los datos en el componente hijo. Y es muy sencillo.

Aquí puede haber dos casos.

Caso 1: Si estás usando un componente funcional, simplemente captura el padreAHijo en los parámetros.

import React from 'react'

export default function Hijo({padreAHijo}) {
    return (
        <div>
            {padreAHijo}
        </div>
    )
}

Case 2: Si tienes un componente clase, entonces puedes usar this.props.padreAHijo.

import React, { Component } from 'react'

export default class Hijo extends Component {
    render() {
        return (
            <div>
                {this.props.padreAHijo}
            </div>
        )
    }
}

De cualquier manera, vas a obtener los mismos resultados:

Cuando hagamos clic en el botón Clic Padre, veremos los datos como resultados en la pantalla.

import React from 'react'
import Hijo from './Hijo';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Padre() {
  const [datos, estableceDatos] = useState('');
  
  const padreAHijo = () => {
    estableceDatos("Esta es la data del componente Padre al componente Hijo.");
  }
  return (
    <div className="App">
      <Child padreAHijo={datos}/>
      
      <div className="Hijo">
        <Button primary onClick={() => padreAHijo()}>Clic Padre</Button>
      </div>
    </div>
  )
}

Arriba puedes ver el código completo para el Componente Padre.

Como pasar data entre un Componente Hijo y un Componente Padre

Esto es algo más complicado.

En primer lugar, hay que crear una función en el componente padre llamada  hijoAPadre y un estado vacío llamado datos.

const [datos, estableceDatos] = useState('');

const hijoAPadre = () => {
   
}

Entonces, pasa la función  hijoAPadre como una propiedad al componente hijo.

<Hijo hijoAPadre={hijoAPadre}/>

Ahora, en nuestro componente hijo, acepta esta llamada a la función como props y la asigna a un evento onClick.

Además, declare un estado que contenga algunos datos en forma de cadena o número.

Pasa los datos dentro de la función padreAHijo como parámetros.

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Hijo({hijoAPadre}) {
    const datos = "Esta es los datos del componente Padre al componente Hijo."
    return (
        <div>
            <Button primary onClick={() => hijoAPadre(datos)}>Clic Hijo</Button>
        </div>
    )
}

A continuación, en el componente padre, acepta estos datos en la función hijoAPadre como parámetro. A continuación, establezca los datos utilizando el gancho useState.

import './App.css';
import { useState } from 'react';
import Hijo from './Hijo';

function Padre() {
  const [datos, estableceDatos] = useState('');
  
  const hijoAPadre = (datoshijo) => {
    estableceDatos(datoshijo);
  }

  return (
    <div className="App">
      <div>
        <Hijo/>
      </div>
    </div>
  );
}

export default Padre;

A continuación, muestra esa variable de datos en la función de retorno.

import './App.css';
import { useState } from 'react';
import Hijo from './Hijo';

function Padre() {
  const [datos, estableceDatos] = useState('');
  
  const hijoAPadre = (datoshijo) => {
    estableceDatos(datoshijo);
  }

  return (
    <div className="App">
     {datos}
      <div>
        <Child hijoAPadre={hijoAPadre}/>
      </div>
    </div>
  );
}

export default Padre;

Los datos del hijo sobreescribirán los datos del padre cuando se haga clic en el botón Clic Hijo (Click Child).

Ahora, puedes pasar datos de hijo a padre y de padre a hijo como un profesional.

También puedes pasar eventos como onClick u OnChange

Solo llama un método de alerta en la función  hijoAPadre y pasa esa función como propiedad al componente hijo.

import './App.css';
import hijo from './Hijo';

function Padre() {
  const hijoAPadre = () => {
    alert("Esto es una alerta del componente Hijo")
  }

  return (
    <div className="App">
      <div className="hijo">
        <Hijo hijoAPadre={hijoAPadre}/>
      </div>
    </div>
  );
}

export default Padre;

Y en el componente hijo, acepta la función hijoAPadre como una propiedad. Entonces asígnale un evento onClick al botón.

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Hijo({hijoAPadre}) {
    return (
        <div>
            <Button primary onClick={() => hijoAPadre()}>Clic Hijo</Button>
        </div>
    )
}

Tu función en el componente padre será llamada cuando hagas clic en el botón del componente hijo y verás esta alerta:

¡Y eso es todo!

Puedes encontrar el código en GitHub si quieres seguir experimentando.

Bueno, eso es todo amigos. Feliz aprendizaje!

La programación funcional no es un nuevo enfoque de programación, pero ha crecido bastante en popularidad en los últimos años.

Esto es porque, una vez que los programadores entienden lo básico de las técnicas (y son capaces de escribir código limpio y confiable usando), las aplicaciones que fueron escritas usando un enfoque funcional son mucho más fáciles de usar.

Por esta razón, vale la pena mejorar nuestro conocimiento de la programación funcional una vez que hayas terminado de trabajar con este JavaScript beginners’ handbook.

Si sueles trabajar con JavaScript, usando este enfoque podrás ahorrarte tiempo, y podrás hacer que tu código sea más fácil para usar y, así como también, tiene potencial de ser más seguro.

En este artículo, vamos a ver los principios básicos de la programación funcional, y luego demarcar algunas de las herramientas claves para usar este tipo de enfoque en JavaScript.

Programación Imperativa vs. Funcional

Los orígenes de la programación funcional se remontan a la década de 1930 con la invención del Cálculo Lambda.

Este enfoque a la computación buscaba definir tareas simples y funciones, no como la manipulación estructural de estructuras de datos (como los arreglos y las listas), sino más bien como funciones matemáticas realizadas sobre ellas.

Esto puede llegar a sonar un poco abstracto, especialmente si eres nuevo a la programación. Pero es el caso que la diferencia entre un enfoque funcional y uno imperativo puede ser expresado de manera breve usando un ejemplo como el siguiente:

Imperativo:

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

function obtenerImpar(arr) {
  let impares = [];
  for (let i = 0; i < arr.length + 1; i++) {
    if (i % 2 !== 0) {
      impares.push(i);
    }
  }
  return impares;
}

console.log(obtenerImpar(arr)); // logs [1, 3, 5, 7, 9]

Funcional:

function obtenerImpar2(arr){
return arr.filter(num => num % 2 !== 0)
}console.log(obtenerImpar2(arr))
// logs [ 1, 3, 5, 7, 9 ]
const obtenerImpar3 = arr => arr.filter(num => num % 2 !== 0)console.log(obtenerImpar3(arr))
// logs [ 1, 3, 5, 7, 9 ]

Como podrás ver, la manera en la que estos programas trabajan es muy distinta.

El enfoque imperativo es el de definir una estructura de data, y luego manipularla para obtener el output requerido. En el enfoque funcional, usamos funciones de filtro para definir una función programada, y luego llamar esta misma cuando sea necesario.

Obviamente, la mayor parte de la complejidad de cómo funciona la programación funcional está escondida del usuario final, así como también del programador si está usando un framework de desarrollo front end.

Pero las ventajas de usar un enfoque funcional son claras hasta dentro de este ejemplo - este paradigma resulta en código más corto que es más fácil de leer, ser entendido y comprobado.

¿Por qué debería usar la programación funcional?

Además de esta ventaja básica, hay varias otras ventajas para su uso.

Varias de estas provienen del simple hecho de que el código funcional es más fácil de leer que el código imperativo. Esto es porque el ser humano puede fácilmente ver como funciona un programa funcional, en vez de tener que desarmar el código para poder entenderlo, muchos aspectos de testing son simplificados.

La programación funcional garantiza la integridad del código con pruebas de penetración

Pruebas de penetración se vuelve más efectiva donde el código es legible por el humano. Esto lo hace más fácil para evaluar la integridad del código funcional.

Según la desarrolladora de software Barbara Ericson de Cloud Defense, las pruebas de penetración siempre deben realizarse en aplicaciones JavaScript, y un enfoque funcional puede ayudar a que esto sea más riguroso.

Esta facilidad de lectura también simplifica muchos otros procesos administrativos que aplican al desarrollo de código y aplicaciones nuevas.

En los enfoques funcionales, los procesos de cumplimiento son más fáciles, porque los programadores no deberían preocuparse mucho por la ejecución de su código. Lo cual significa que las partes del programa que trabajan con información más sensible puede estar aislado y evaluado separado del resto del programa.

La programación funcional hace que el código sea más fácil de leer

Aun así, las ventajas del enfoque funcional no están limitadas al análisis de código. También se extienden al proceso de desarrollo.

De hecho, el enfoque funcional construyen y amplifican las ventajas y desventajas de JavaScript mismo.

Al hacer que el código sea más fácil de leer, puedes traer muchos más grupos de staff al proceso de desarrollo, mismo si no tienen un conocimiento extenso de JavaScript.

Esta es la clave fundamental para el enfoque DevOps, que uno pueda ayudar a mitigar las vulnerabilidades de tu código JavaScript. También es facilitado al tomar un enfoque funcional a tu código.

Herramientas clave para la programación funcional

Hay un número de herramientas clave y conceptos que deberían conocer cuando se trata de poner un enfoque funcional en acción. Veamos cuáles son.

1. Funciones puras e impuras

En el nivel más básico, una programación funcional busca manipular información sin mutarla. Esto significa que una "función funcional" puede obtener datos, llevar a cabo cálculos, y devolver un resultado (todo sin reescribir ninguna parte de la estructura de datos en sí misma).

Funciones que funcionan de esta manera son llamadas "puras", y aquellas que no lo hacen son denominadas "impuras".

 
function getSquare(items) {
  var len = items.length;
  for (var i = 0; i < len; i++) {
    items[i] = items[i] * items[i];
  }
  return items;
}

La idea general es la de dejar la data con la que estás trabajando completamente intacto.

Si quieres fusionar dos arreglos, no debes utilizar la estrategia de  Array.prototype.push() (que sobreescribirá tu data original). Por lo contrario, usar una función Array.prototype.concat(), que creará un nuevo arreglo en "funcionamiento" con el cual podrías trabajar.

2. Funciones anónimas

Las funciones anónimas también son una parte importante de la programación funcional, una que tiene raíces de cálculos Lambda.

Las funciones anónimas, como el nombre lo sugiere, no tienen un nombre explícitamente definido. En cambio, son las funciones que son asignadas a variables e invocadas por medio de las mismas.

 alert((function(x) {
    return !(x > 1)
      ? 1
      : arguments.callee(x - 1) * x;
  })(20));

La ventaja de hacer esto es que mientras que puedas seguir cuáles funciones están asignadas a cuáles variables, estas pueden ser invocadas fácilmente, y pasadas de un módulo a otro sin nada más que una llamada de variables. Esto te da una nueva manera más flexible y poderosa de trabajar con funciones.

3. Funciones recursivas

El uso de funciones recursivas es otro sello de la programación funcional. Aunque la idea general de la recursión será familiar para los programadores principiantes, la programación funcional lleva la idea aún más lejos al definir funciones que se llamen a sí mismas.

function cuentaRegresiva(fromNumber) {
    console.log(fromNumber);

    let siguienteNum = fromNumber - 1;

    if (siguienteNum > 0) {
        cuentaRegresiva(siguienteNum);
    }
}
cuentaRegresiva(3);

Esto hace que la implementación de la recursión sea más simple - en gran parte porque los programadores no necesitan usar bucles para hacerlo.

Aunque, también viene con sus peligros. Específicamente, tener una función que se llame a sí misma hace que sea aún más fácil para accidentalmente crear un bucle infinito, así que ten el cuidado de respaldar cada función recursiva con una manera rigurosa de parar la ejecución.

Conclusión

Aunque estos tres conceptos son típicos de la programación funcional, la verdad es que la gran variedad de maneras en la cual el paradigma puede ser aplicado significa que es más una filosofía que herramientas y procesos bien diseñados.

Toma un par de pasos para adentrarte al mundo emocionante de la programación funcional, y empezarás a ver su influencia en todos lados. De hecho, comunica muchas de las prácticas más comunes en JavaScript que se usan hoy en día.

En otras palabras, aunque la programación funcional parezca superficialmente simple, tiene consecuencias muy profundas en la manera en la que programas. Es por esto que vale la pena aprenderlo, incluso aunque no lo suelas usar todo el tiempo.

El pie de página es el último elemento de la página. Mínimamente, está al pie de tu pantalla, o más bajo si el contenido de la página es más alto que tu ventana. ¿Es simple, no?

Cuando estás trabajando con contenido dinámico que incluye un pie de página, ocurre a veces un problema donde el contenido de la página no es suficiente para llenarla. El pie de página, en vez de quedarse al pie de página donde nos gustaría que se quede, sube y deja un espacio en blanco debajo de sí.

Para una corrección rápida, puedes posicionar el pie de página al final de tu página. Pero esto viene con su consecuencia. Si el contenido crece y se vuelve más grande que la ventana, el pie de página se encuentra ‘atascado’ al final de la pantalla, lo queramos o no.

Esto demuestra el comportamiento que no queremos y aquel que si:

Veamos como podemos lograrlo.

Obteniendo control sobre tu pie de página

index.html:

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- todo el contenido de pagina -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

main.css:

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* altura de pie de página */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* altura de pie de página */
}

¿Qué es lo que está haciendo?

• El page-container va alrededor de todo lo que está en la página, y establece su altura a una mínima del 100% de la altura de la ventana(vh). Como es relative, sus elementos hijos pueden luego saetearse con una posición absolute.
• El content-wrap tiene un relleno (padding) por debajo que es de la altura del pie de página, para asegurarnos que haya suficiente espacio para el pie de página dentro del contenedor donde ambos se encuentran. Un  div que los envuelve todo el otro contenido de la página es usado aquí.
• El footer es fijado con absolute, manteniéndolo al bottom: 0 de la página page-container en la que se encuentra. Esto es importante, no esabsolute con respecto a la ventana, pero se moverá para abajo si el page-container es más largo que la ventana. Como está definido, su altura, arbitrariamente fijada a  2.5rem, es usada en el content-wrap arriba de la misma.

Y ahí lo tienes. ¡Tu pie de página se quedará adonde esperas que lo haga!

Toques finales

Obvio, esto es CSS, así que no estaría completo sin tener algunas consideraciones sobre el UX en usuarios con teléfonos móviles, y un enfoque alternativo usando min-height: 100% envés de 100vh. Pero esto trae sus consecuencias.

También se puede usar Flexbox(con flex-grow) o Grid, ambos son muy poderosos.

Cuál método usas lo dejo a tu criterio, y a las especificaciones de tu diseño. Espero que el ejemplo de arriba y los links de arriba te ahorren tiempo en tomar una decisión e implementarla.