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/>; }