Ejercicio React con propiedades

Vamos a crear un componente ‘Suma’ al que le pasaremos dos propiedades llamadas num1 y num2 y nos mostrará:

La suma de num1 + num2 es igual a total

Me mostrará:

La suma de 4 y 5 es igual a 9

import React from "react";

class Suma extends React.Component {
  render() {
    let num1 = parseFloat(this.props.num1);
    let num2 = parseFloat(this.props.num2);
    let suma=num1+num2
    return (
      <h2>
        Suma de {num1} y {num2} es igual a {suma}
      </h2>
    );
  }
}

export default function App() {
  return <Suma num1="14" num2="57" />;
}

Otro ejemplo:

import React from "react";

class Suma extends React.Component {
  render() {
    let suma = 0;
    for (i = 1; i <= this.props.hasta; i++) {
      suma += i;
    }
    return (
      <h2>
        La suma de todos los numeros hasta el {this.props.hasta} es {suma}
      </h2>
    );
  }
}

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

import React from "react";
 
class Suma extends React.Component {
  render() {
    // Asignamos las variobles con destructuring
    let {num1,num2}=this.props
    let suma=parseFloat(num1)+parseFloat(num2)
    return (
      <h2>
        Suma de {num1} y {num2} es igual a {suma}
      </h2>
    );
  }
}
 
export default function App() {
  return <Suma num1="14" num2="57" />;
}