Erro de compilação para o novo componente | React parte 1: componentes reutilizáveis para sua webapp

Solucionado (ver solução)

Solucionado
(ver solução)

4
respostas

por Felipe Olavo Manente

| 33k xp | 5 posts

Novo Componente

import React, {Component} from 'react';

class InputComponent 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.onChanged}/>
            </div>
        );
    }
}

export default InputComponent;

Classe App

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

...codigo ocultado

  render()
  {
    return (

       ...codigo ocultado

                <form className="pure-form pure-form-aligned" onSubmit={this.enviaForm} method="post">
        <InputComponent id="nome" type="text" name="nome" value={this.state.nome} onChange={this.setNome} label="Nome"/> 
                  <div className="pure-control-group">
                    <label></label>
                    <button type="submit" className="pure-button pure-button-primary">Gravar</button>
                  </div>
                </form>

             ...codigo ocultado
    );
  }
}

export default App;

Erro... Failed to compile ./src/components/InputComponent.js

4 respostas

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

07/10/2019

Fala ai Felipe, tudo bem? O erro que dá é somente esse? Acredito que tenha um erro mais completo onde dá para ver o que pode estar de errado.

Fico no aguardo.

por Felipe Olavo Manente

| 33k xp | 5 posts

08/10/2019

Alterei o import e o extends e o problema foi resolvido.

import React from 'react';

class InputComponent extends React.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.onChanged}/>
            </div>
        );
    }
}

export default InputComponent;

Obrigado!!!!!

solução!

por Felipe Olavo Manente

| 33k xp | 5 posts

08/10/2019

import React from 'react';

class InputComponent extends React.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.onChanged}/>
            </div>
        );
    }
}

export default InputComponent;

Alterei o import e o extends e o problema foi resolvido.

Obrigado!!!!!

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

09/10/2019

Boa Felipe, fico feliz que tenha resolvido o problema.

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

Abraços e bons estudos.