3
respostas

Duvida no Array de categorias.

{this.props.categorias.map((categoria, index) => {
            return (
              <li key={index} className="lista-categorias_item">
                {categoria}
              </li>
            );
          })}

como que categorias pega o que foi digitado no input?

3 respostas

Fala ai Danilo, tudo bem? Acho que seu código está incompleto e não ficou claro para mim sua dúvida.

Consegue me passar mais detalhes sobre a dúvida e possíveis códigos mais completos sobre os componentes?

Fico no aguardo.

Fala Matheus,tudo bem? estou bem sim!vou deixar o código inteiro aqui. App.js

 adicionarCategoria(nomeCategoria){
    const novoArrayCategorias = [...this.state.categorias,nomeCategoria];
    const novoEstado = {...this.state,categorias:novoArrayCategorias};
    this.setState(novoEstado)
  }

render(){
    return(
        <ListaCategorias 
        adicionarCategoria={this.adicionarCategoria.bind(this)}
        categorias={this.state.categorias}/>
    )
}

ListaCategorias.jsx

handleEventoInput(e) {
    if (e.key == "Enter") {
      let valorCategoria = e.target.value;
      this.props.adicionarCategoria(valorCategoria);
    }
  }

<section className="lista-categorias">
        <ul className="lista-categorias_lista">
          {this.props.categorias.map((categoria, index) => {
            return (
              <li key={index} className="lista-categorias_item">
                {categoria}
              </li>
            );
          })}
        </ul>
        <input
          type="text"
          className="lista-categorias_input"
          placeholder="Adicionar Categoria"
          onKeyUp={this.handleEventoInput.bind(this)}
        />
      </section>

Fala Danilo, o valor é pego nessa função:

handleEventoInput(e) {
    if (e.key == "Enter") {
      let valorCategoria = e.target.value;
      this.props.adicionarCategoria(valorCategoria);
    }
  }

Caso a tecla Enter seja pressionada no campo, ele pega o valor digitado no campo através do e.target.value a manda para a função adicionarCategoria do componente pai.

Espero ter ajudado.

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