1
resposta

qual o nome dessa operação no EcmaScript?

bom dia.

já fiz os cursos de pre-req, li o livro de ECMA do casadocodigo, o q ja tem um tempo, mas mesmo assim, fiquei com duvidas nessa operação:

this.setState({
            [name] : value
        });

[name] : value - qual o nome dessa operação? e o q ela faz mesmo? Obrigado.

1 resposta

Pelo que eu vi do seu código, seria para atualizar dinamicamente o state.

No caso do React, se eu tiver uma tela com 10 campos, e eu quiser persistir os dados de cada um, eu teria um state com 10 itens e 10 funções para atualizar o state de cada campo.

Fazendo desta forma:

 this.state = {
      firstName: '',
      age: '',
    }
  }

handleChange = (event) => {
    const { target: { name, value } } = event
    this.setState({ [name]: value })
  }

render() {
    return (
      <form >
        <label>
          First Name:
          <input
            name="firstName"
            type="text"
            value={this.state.firstName}
            onChange={this.handleChange} />
        </label>
        <label>
          Age:
          <input
            name="age"
            type="number"
            value={this.state.age}
            onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }

Eu posso ter uma função de atualização única para qualquer campo que eu adicionar.

Perceba que no formulário o nome do input é o mesmo nome da propriedade do state. A função pega o campo e o valor do campo, faz a separação e atualiza o state.

Aqui tem um exemplo passo a passo:

https://medium.com/@bretdoucette/understanding-this-setstate-name-value-a5ef7b4ea2b4

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