1
resposta

Warning: validateDOMNesting(...): <opiton> cannot appear as a child of <select>

Boa noite gente!! No meu código, na parte do formulário, não aparece para mim a lista das categorias no select. Quando eu crio a categoria, ele aparece no console o seguintes erros:

**Warning: validateDOMNesting(...): cannot appear as a child of

  • .
  • Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

    Tentei achar algo e não consegui. Segue meu código abaixo:

    class FormularioCadastro extends Component {
    
    constructor(props) {
        super(props);
        this.titulo = "";
        this.texto = "";
        this.categoria = "Sem Categoria";
        this.state = { categorias: [] };
    }
    
    componentDidMount() {
        this.props.categorias.inscrever(this.novasCategorias.bind(this));
    }
    
    novasCategorias(categorias) {
        this.setState({ ...this.state, categorias })
    }
    
    handleMudancaTitulo(evento) {
        evento.stopPropagation();
        this.titulo = evento.target.value
    }
    
    handleMudancaTexto(evento) {
        evento.stopPropagation();
        this.texto = evento.target.value
    }
    
    handleMudancaCategoria(evento) {
        evento.stopPropagation();
        this.categoria = evento.target.value;
    }
    
    criarNota(evento) {
        evento.preventDefault();
        evento.stopPropagation();
        this.props.criarNota(this.titulo, this.texto, this.categoria)
    }
    
    render() {
        return (
                <form className='form-cadastro' onSubmit={this.criarNota.bind(this)}>
                    <select onChange={this.handleMudancaCategoria.bind(this)} className='form-cadastro_input'>
                        <option>Sem Categoria</option>
                        {this.state.categorias.map((categoria, index) => { return (<opiton key={index}>{categoria}</opiton>) })};
                    </select>
                    <input type="text" placeholder='Título' className='form-cadastro_input' onChange={this.handleMudancaTitulo.bind(this)} />
                    <textarea rows={15} placeholder='Escreva sua nota...' className='form-cadastro_input' onChange={this.handleMudancaTexto.bind(this)}></textarea>
                    <button className='form-cadastro_input form-cadastro_submit'>Cria Nota</button>
                </form>
        )
    }

    }

    1 resposta

    Fala Carolina, tudo bem? Espero que sim!

    No retorno do map você retorna uma tag inexistente: opiton sendo o correto option, assim ficando o retorno:

    {this.state.categorias.map((categoria, index) => { return (<option key={index}>{categoria}</option>) })};

    Espero ter ajudado, abraços e bons estudos :D

    Quer mergulhar em tecnologia e aprendizagem?

    Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software