⬅ AnteriorMenúSiguiente ➡

Lección 07. Tipos de datos en las propiedades.

Dentro de las propiedades (props), podemos pasar diferentes tipos de datos, no solamente strings/textos, veamos:

Strings, numbers y booleans._

Podemos enviar diferentes tipos de datos en las propiedades para ser utilizado en un componente, tal como se envían al siguiente componente.

Copiar código
<Propiedades
  cadena="Cadena" 
  Numero = {19} 
  boolean = {true} 
/>

Nota: Para propiedades que NO sean de tipo cadena se utilizan los {}, para el contenido.

Quedando en el componente, de la siguiente manera.

Copiar código
import React from "react";

export default function Propiedades (props) {

  return (
    <div>
      <ul>
        <li>
          {props.cadena}
        </li>
        <li>
          {props.numero}
        </li>
        <li>
          {props.boolean}
        </li>
      </ul>
    </div>
  );
}

Nota: El tipo de dato boolean NO se visualiza como un texto, este puede servir para una condición a realizar o un operador ternario.

Si queremos imprimir dato con el boolean, podemos hacer algo asi

Copiar código
<li>
  {props.boolean ? "Verdadero" : "Falso"}
</li>

De esta manera, si el props.boolean es true, se imprime "Verdadero", si no, se imprime "Falso".

Arrays, objets, REACT elements, functions y REACT components._

También podemos pasar datos mas complejos, tales como arrays.

Para ello, la sintaxis es la siguiente:

Copiar código
<Propiedades
  cadena="Cadena"
  numero = {19}
  boolean = {true}
  arreglo = {[1,2,3]}
  objeto = {{nombre:"Roberto", correo: "Roberto@gmail.com"}}
  elementoReact = {<i>Esto es un elemento de REACT</i>}
  funcion = {(num) => num * num}
  componenteReact = {<Componente msg = "Soy un componente pasado como prop"/>}
/>

Recibiendo, dentro del componente de la siguiente manera:

Copiar código
import React from "react";

export default function Propiedades (props) {
  return (
    <div>
      <ul>
        <li>
          {props.cadena}
        </li>
        <li>
          {props.numero}
        </li>
        <li>
          {props.boolean ? "Verdadero" : "Falso"}
        </li>
        <li>
          {props.arreglo}
        </li>
        <li>
          {props.arreglo.join(", ")}
        </li>
        <li>
          {props.objeto.nombre}
        </li>
        <li>
          {props.elementoReact}
        </li>
        <li>
          {props.arreglo.map(props.funcion)}
        </li>
        <li>
          {props.componenteReact}
        </li>
      </ul>
    </div>
  );
}

Nota: Los componentes pueden recibir cualquier tipo de dato, como:

⬅ AnteriorMenúSiguiente ➡