DEV Community

Samuel Narciso
Samuel Narciso

Posted on

Props de react chidas y bien explicadas.

Las propiedades o por la forma mas común props es la manera de enviar datos a los componentes, pasándolos por parámetros.
ejemplo:
Queremos crear un componente que sea una tarjeta de usuario, el cual se llene con datos de cada usuario.
hacemos algo como esto:Tarjeta de usuario
Ahora nuestro componente ocupa los datos [ nombre, sexo, nickname, edad, nacionalidad ]

podríamos establecerlos directamente en nuestro texto, pero eso no seria muy dinamico de nuestra parte

entonces aquí entran las props, que vendrían siendo parámetros con valores dados por el sistema o usuario.

como enviamos las propiedades a nuestros componentes?

Para enviar un valor por props los enviamos desde donde estamos llamando al componente, siguiendo la siguiente estructura:

<NombreComponente
  nombre_propiedad =  'valor_de_la_propiedad'  
  .
  .
  .  
/>
Enter fullscreen mode Exit fullscreen mode

podemos poner cuantas propiedades sean necesarias para nuestro componente.
Componente con props

Ya enviamos nuestras propiedades bien dinamicas a nuestro objeto, pero ahora...

Como obtenemos las propiedades en nuestro objeto?

Estos llegan a los parámetros de nuestro componente y la forma mas común de obtenerlos es con un objeto que se llame props y de ahí llamar cada propiedad según la necesitemos.
Componente recibiendo props

(El nombre de las propiedades debe ser el mismo que le colocamos cuando las enviamos)

(El nombre props es un nombre estándar, pero si podemos colocarle el nombre que nosotros gustemos.)
Componente con props re-bautizadas

Trucos con las props

Como las estamos pasado por parámetros, podemos utilizar la funcionalidad de Desestructuracion y así evitamos la palabra props y colocamos únicamente el nombre del elemento que estamos pasando, haciendo mas entendible nuestro código.
Componente desestructurado

En cualquier caso, si lo desestructuras o no, el resultado siempre seguirá siendo el mismo.
Alt Text
(El nombre de las propiedades al ser desestructuradas debe ser el mismo que le colocamos cuando las enviamos)

Top comments (0)