evento.target.value is undefined

fala ai Universidade, tudo bem? Você realizou o bind da função no constructor do componente?

this.setNome = this.setNome.bind(this)

Talvez pode ser isso, se não for, a gente vai conversando.

Espero ter ajudado

Olá, meu construtor tem esses binds.

constructor() {
    super();
    this.state = {list: [], name:'', author:'', description:'', pages:''} ;
    this.sendForm = this.sendForm.bind(this);
    this.setName = this.setName.bind(this);
    this.setAuthor = this.setAuthor.bind(this);
    this.setDescription = this.setDescription.bind(this);
    this.setPages = this.setPages.bind(this);
  }

Segue meu código:

App.js

import React, { Component } from 'react';
import './css/pure-min.css';
import './css/side-menu.css';
import $ from 'jquery';
import CustomInput from './components/CustomInput';

class App extends Component {

  constructor() {
    super();
    this.state = {list: [], name:'', author:'', description:'', pages:''} ;
    this.sendForm = this.sendForm.bind(this);
    this.setName = this.setName.bind(this);
    this.setAuthor = this.setAuthor.bind(this);
    this.setDescription = this.setDescription.bind(this);
    this.setPages = this.setPages.bind(this);
  }

  componentDidMount() {
    $.ajax({
      url: 'https://warehouserest.herokuapp.com/book',
      dataType: 'json',
      success: function(answer){
        this.setState({list:answer});
      }.bind(this)
    });
  }

  sendForm(event) {
    event.preventDefault();
    $.ajax({
      url: 'https://warehouserest.herokuapp.com/book',
      contentType: 'application/json',
      dataType: 'json',
      type: 'post',
      data: JSON.stringify({name:this.state.name, author:this.state.author, description:this.state.description, pages:this.state.pages}),
      success: function(answer) {
        this.setState({list:answer});
      }.bind(this),
      error: function(answer) {
        console.log("error");
      }
    });

  }

  setName(event) {
    this.setName({name:event.target.value});
  }

  setAuthor(event) {
    this.setAuthor({author:event.target.value});
  }

  setDescription(event) {
    this.setDescription({description:event.target.value});
  }

  setPages(event) {
    this.setPages({pages:event.target.value});
  }

  render() {
    return (
      <div id="layout">
        <a href="#menu" id="menuLink" className="menu-link">
          <span></span>
        </a>

        <div id="menu">
          <div className="pure-menu">
            <a className="pure-menu-heading" href="#">Company</a>

            <ul className="pure-menu-list">
              <li className="pure-menu-item"><a href="#" className="pure-menu-link">Home</a></li>
              <li className="pure-menu-item"><a href="#" className="pure-menu-link">Author</a></li>
              <li className="pure-menu-item"><a href="#" className="pure-menu-link">Book</a></li>
            </ul>
          </div>
        </div>

        <div id="main">
          <div className="header">
            <h1>Books Register</h1>
          </div>
          <div className="content" id="content">
            <div className="pure-form pure-form-aligned">
              <form className="pure-form pure-form-aligned" onSubmit={this.sendForm} method="post">
                <CustomInput id="name" type="text" name="name" value={this.state.name} onChange={this.setName} label="Name"></CustomInput>
                <CustomInput id="author" type="text" name="author" value={this.state.author} onChange={this.setAuthor} label="Author"></CustomInput>
                <CustomInput id="description" type="text" name="description" value={this.state.description} onChange={this.setDescription} label="description"></CustomInput>
                <CustomInput id="pages" type="text" name="pages" value={this.state.pages} onChange={this.setPages} label="Pages"></CustomInput>

                <div className="pure-control-group">
                  <label></label>
                  <button type="submit" className="pure-button pure-button-primary">Save</button>
                </div>
              </form>
            </div>
            <div>
              <table className="pure-table">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Author</th>
                    <th>Description</th>
                    <th>Pages</th>
                  </tr>
                </thead>
                <tbody>
                  {
                    this.state.list.map(function(book){
                      return (
                        <tr key={book.id}>
                          <td>{book.name}</td>
                          <td>{book.author}</td>
                          <td>{book.description}</td>
                          <td>{book.pages}</td>
                        </tr>
                      );
                    })                  
                  }                  
                </tbody>
              </table>
            </div>
          </div>
        </div>

      </div>
    );
  }
}
export default App;

O erro foi meu nos métodos abaixo:

setName(event) {
    this.setName({name:event.target.value});
  }
  setAuthor(event) {
    this.setAuthor({author:event.target.value});
  }
  setDescription(event) {
    this.setDescription({description:event.target.value});
  }
  setPages(event) {
    this.setPages({pages:event.target.value});
  }

Todos deveriam estar escritos da seguinte maneira:

setName(event) {
    this.setState({name:event.target.value});
  }
  setAuthor(event) {
    this.setState({author:event.target.value});
  }
  setDescription(event) {
    this.setState({description:event.target.value});
  }
  setPages(event) {
    this.setState({pages:event.target.value});
  }

Obrigado pelo retorno ;)

Boa, fico feliz que tenha resolvido o problema, não deu tempo de dar uma olhada nos códigos.

Desculpa a demora, estava bem corrido as coisas por aqui.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.