Erro no input customizado

olá Pedro, poderia mandar o código para analisarmos melhor?

Valeu

Claro, obrigado.

App. js:

import React, { Component } from 'react';
import './css/pure-min.css';
import './css/side-menu.css';
import $ from 'jquery';
import InputCustomizado from './componentes/inputCustomizado.js';

class App extends Component {

  constructor() {
  super();
  this.state = {lista : [],nome:'',email:'',senha:''};
  this.enviaForm = this.enviaForm.bind(this);
  this.setNome = this.setNome.bind(this);
  this.setEmail = this.setEmail.bind(this);
  this.setSenha = this.setSenha.bind(this);
}

  componentDidMount(){
    console.log("didMount");
    $.ajax({
        url:"http://localhost:8080/api/autores",
        dataType: 'json',
        success:function(resposta){    
          console.log("chegou a resposta");          
          this.setState({lista:resposta});
        }.bind(this)
      } 
    );          
  }

  enviaForm(evento){
    evento.preventDefault();

    $.ajax({
    url:"http://localhost:8080/api/autores",
    contentType: 'application/json',
    dataType:'json',
    type:'post',
    data: JSON.stringify({nome:this.state.nome,email:this.state.email,senha:this.state.senha}),
     success: function(resposta){
       this.setState({lista:resposta});
     }.bind(this),
     error: function(resposta){
       console.log("erro")
     }
    }); 
  }

  setNome(evento){
    this.setState({nome:evento.target.value});
  }

  setEmail(evento){
    this.setState({email:evento.target.value});
  }

  setSenha(evento){
    this.setState({senha:evento.target.value});
  }

  render() {
    console.log("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">Autor</a></li>
                      <li className="pure-menu-item"><a href="#" className="pure-menu-link">Livro</a></li>


                  </ul>
              </div>
          </div>

              <div id="main">
                  <div className="header">
                    <h1>Cadastro de Autores</h1>
                  </div>
                  <div className="content" id="content">
                    <div className="pure-form pure-form-aligned">
                     <form className="pure-form pure-form-aligned" onSubmit={this.enviaForm} method="post">
                      <InputCustomizado id="nome" type="text" name="nome" value={this.state.nome} onChange={this.setNome} label="Nome"/>                                              
                      <InputCustomizado id="email" type="email" name="email" value={this.state.email} onChange={this.setEmail} label="Email"/>                                              
                      <InputCustomizado id="senha" type="password" name="senha" value={this.state.senha} onChange={this.setSenha} label="Senha"/>                                                   <div className="pure-control-group">                                  
                        <label></label>
                          <button type="submit" className="pure-button pure-button-primary">Gravar</button>                                    
                        </div>
                      </form>        
                    </div>  
                    <div>            
                      <table className="pure-table">
                        <thead>
                          <tr>
                            <th>Nome</th>
                            <th>email</th>
                          </tr>
                        </thead>
                        <tbody>
                          {
                            this.state.lista.map(function(autor){
                              return (
                                <tr key={autor.id}>
                                  <td>{autor.nome}</td>
                                  <td>{autor.email}</td>
                                </tr>
                              );
                            })
                          }
                        </tbody>
                      </table> 
                    </div>             
                  </div>
                </div>            


      </div>     
    );
  }
}

export default App;

InputCustomizado.js

import React, { Component } from 'react';

export default class InputCustomizado extends Component{

    render() {
        return(
          <div className="pure-control-group">
            <label htmlFor={this.props.id}>{this.props.label}</label>
            <input id="{this.props.id}" type="{this.props.type}" name="{this.props.name" value={this.props.id} onChange={this.props.onChange}/>
          </div>
      );
    }
}

Pedro,

no seu input do InputCustomizado, no atributo value você ta passando novamente o this.props.id, e o atributo name esta faltando fechar chaves.

  <input id="{this.props.id}" type="{this.props.type}" name="{this.props.name" value={this.props.id} onChange={this.props.onChange}/>

Não tive como testar pois não estou no pc, então dá uma olhada e manda o feedback.

Fala Jefferson, Alterei o InputCustomizado.js, mas o erro persiste ( o Label está fora e dentro do input, além disso não consigo digitar nos campos). Abraço!

import React, { Component } from 'react';

export default class InputCustomizado extends Component{

    render() {
        return(
          <div className="pure-control-group">
            <label htmlFor={this.props.id}>{this.props.label}</label>
            <input id={this.props.id} type={this.props.type} name={this.props.name} value={this.props.value} onChange={this.props.onChange}/>
          </div>
      );
    }
}

Será que é porque o value do input do inputCustomisado.js está como variável dinâmica?