Ejemplos propiedades en Componentes

import React from "react";

class Alumno extends React.Component {
  constructor(){
    super()
  }
  render() {
    return <h2>Me llamo {this.props.nombre}</h2>;
  }
}

export default function App() {
  return (
    <article>
      <Alumno nombre="Ralph"/>
      <Alumno nombre="Lisa"/>
    </article>
  );
}

Varias propiedades:

import React from "react";

class Alumno extends React.Component {
  constructor(){
    super()
  }
  render() {
    return (
      <div>
    <h2>Me llamo {this.props.nombre}</h2>
    <h3>Y me gusta la asignatura de {this.props.asignatura}</h3>
    </div>
    );
  }
}

export default function App() {
  return (
    <article>
      <Alumno nombre="Ralph" asignatura="canicas"/>
      <Alumno nombre="Lisa" asignatura="Música"/>
    </article>
  );
}

Propiedades en la clase

class Alumno extends React.Component {
  render () {
    return <h2 className="{this.props.clase}">Me llamo Ralph</h2>
  }
}

function App () {
  return (
    <div className='App bg-primary'>
      <Alumno clase="bg-success" />
    </div>
  )
}

Propiedades en JS:

import React from "react";

class Alumnos extends React.Component {
  render () {
    const alumnos = []
    for (let i = 0; i < this.props.cantidad; i++) {
      alumnos.push(<p key={i}>Alumno {i + 1}</p>)
    }
    return <div>{alumnos}</div>
  }
}

export default function App() {
  return (
    <Alumnos cantidad="10"/>
  );
}

En este ejemplo y en el anterior creamos una tabla para agrupar diferentes elementos. Los elementos, como están repetidos, incluyen un ‘key’ que es algo que pide el React, pero que funciona si no lo ponemos y a lo que no le vamos a prestar atención.

class Tabla extends React.Component {
  render() {
    const tabla = [];
    for (let i = 1; i <= 10; i++) {
      tabla.push(
        <p key={i}>
          {this.props.numero} x {i} = {this.props.numero * i}
        </p>
      );
    }
    return <div>{tabla}</div>;
  }
}
export default function App() {
  return <Tabla numero="7" />;
}