Diferentes inputs


import React, { Component } from 'react'

class Alumno extends React.Component {
  constructor(props) {
    super(props);
    this.state = { nombre: '', nota:0 };
  }
  cambioValores = (event) => {
   let nombreInput=event.target.name;
   let valorInput=event.target.value;
    this.setState({[nombreInput]: valorInput});
  
  }
  render() {
    return (
      <form>
      <h1>Hola {this.state.nombre}</h1>
      <p>Tienes una nota de {this.state.nota}</p>
      <input
        type='text' name="nombre"
        onChange={this.cambioValores}
      />
         <input
        type='text' name="nota"
        onChange={this.cambioValores}
      />
      </form>
    );
  }
}

export default function App() {
  return <Alumno/>;
}

¿Os atrevéis a añadir una propiedad apellido con su input correspondiente y que lo muestre también en el h1?

import React, { Component } from 'react'

class Alumno extends React.Component {
  constructor(props) {
    super(props);
    this.state = { nombre: '', apellidos:'',nota:0 };
  }
  cambioValores = (event) => {
   let nombreInput=event.target.name;
   let valorInput=event.target.value;
    this.setState({[nombreInput]: valorInput});
  }
  render() {
    return (
      <form>
      <h1>Hola {this.state.nombre} {this.state.apellidos}</h1>
      <p>Tienes una nota de {this.state.nota}</p>
      <input
        type='text' name="nombre"
        onChange={this.cambioValores}
      />
       <input
        type='text' name="apellidos"
        onChange={this.cambioValores}
      />
         <input
        type='text' name="nota" 
        onChange={this.cambioValores}
      />
      </form>
    );
  }
}

export default function App() {
  return <Alumno/>;
}

Publicado por

Avatar del usuario

Juan Pablo Fuentes

Formador de programación y bases de datos