This está indefinido, porque? No debería ser la propia clase? <code>handleChange = e =&gt; { // console.log({ // name: e.target...

Ya lo revisé, sólo que en tu marcado falta dos etiqueta, la que cierra el

Si llamas

Pero si lo llamo con un arrow function (como el de la pregunta original) no me sale undefinend, me logea la clase "BadgeForm"

class BadgeForm extends React.Component{

  state = {
    firstName: '',
    lastName: '',
    email: '',
    jobTitle: '',
    twitter: ''
  };

  handleChange = e => {
    console.log(this)
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  handleClick = e => {
    console.log('Button was clicked');
  }

  handleSubmit = e => {
    e.preventDefault();
    console.log(this.state);
  }

  render(){
    return (
      <div>
        <h1>NewAttendant</h1>

        <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <label>FirstName</label>
            <input
              onChange={this.handleChange}
              type="text"
              name="firstName"
              className="form-control"
              /* Leyendo de un estado */
              value={this.state.firstName}
            />
          </div>
        </form>
      </div>
    );
  }
}

export default BadgeForm;

class BadgeForm extends React.Component {

  state = {
    firstName: '',
    lastName: '',
    email: '',
    jobTitle: '',
    twitter: ''
  };

// Aqui, this es undefined, se esta llamando a esta funcion desde fuera de la clase, por el click, pero debería mostrar un valor, no?
  handleChange(e){
    // console.log({
    //   name: e.target.name,
    //   value: e.target.value,
    // });
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  handleClick = e => {
    console.log('Button was clicked');
  }

  handleSubmit = e => {
    e.preventDefault();
    console.log(this.state);
  }

  render(){
    return (
      <div>
        <h1>New Attendant</h1>

        <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <label>First Name</label>
            <input
              onChange={this.handleChange}
              type="text"
              name="firstName"
              className="form-control"
              /* Leyendo de un estado */
              value={this.state.firstName}
            />
          </div>
    );
  }
}

export default BadgeForm;```

¡Hola!

Sí,