Ejercicio react

Vamos a hacer una tabla de multiplicar dinámica en la que tenemos dos inputs. Uno que vale 10 por defecto pero que podemos cambiar y otro que vale 1 por defecto y que también podemos cambiar.
Se nos muestra la tabla de multiplicar hasta el valor del primer número del segundo número.
Ejemplo: [__10__] [__6__]
1×6=6
2×6=12
..
10×6=60

Si cambio el valor del primero me cambia el alcance de la tabla.
Ejemplo: [__4__] [__6__]
1×6=6
2×6=12
3×6=18
4×6=24

Si cambio el valor se segundo me cambia la tabla:
Ejemplo: [__4__] [__3__]
1×3=3
2×3=6
3×3=9
4×3=12

Pista:

 import React, { Component } from 'react'
 
class Calculadora extends React.Component {
  constructor(props) {
    super(props);
    this.state = { numero:1,limite:10 };
  }
  cambioValores = (event) => {
    let nombreInput=event.target.name;
    let valorInput=event.target.value;
     this.setState({[nombreInput]: valorInput});
  }
  
  render() {
    let tabla=[]
    let limite=parseFloat(this.state.limite)
    for(let i=1;i<=this.state.limite;i++){
      tabla.push(<p>{i}x{this.state.numero}={i*parseFloat(this.state.numero)}</p>)
    }
     
    return (
      <div>
     
      <input
        type='number' name="limite" value={this.state.limite}
        onChange={this.cambioValores}
      />
       <input
        type='number' name="numero" value={this.state.numero}
        onChange={this.cambioValores}
      />
     <div>{tabla}</div> 
     </div>
    );
  }
}
 
export default function App() {
  return <Calculadora/>;
}

Publicado por

Avatar del usuario

Juan Pablo Fuentes

Formador de programación y bases de datos