Take variable parameter Javascript/React function

Question

How do I take a function parameter and use it to pick up a variable? For example, in this code:

import React, { Component } from 'react';

export default class Home extends Component {
  state = {
    name: 'joao',
    age: 18
  }
  set = (s, v) => {
    this.setState({s: v})
  }
  get = (s) => {
    return this.state.s;
  }
  render() {
    return(
      <div>
        <button onClick={() => this.set('name', 'maria')}>Mudar Nome</button>
        <button onClick={() => this.set('age', 20)}>Mudar Idade</button>
        {this.get('name')}
        {this.get('age')}
      </div>
    );
    };
}

I wanted to pass the get('name') and the get do something like: Return this.state.name; But it does not return this, it seems that it uses only the s

How do you do that? What’s the name of it? (this code I made just for example)

Answer 1

If you change your method set for

set = (s, v) => {
    this.setState({
        [s]: v
    })
}

(note the [] involving the key s) you must achieve your goal. This is called Computed Property Names

Answer 2

In your case you can do it like this:

class Home extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "João",
      age: 18
    };
  }

  handleName = e => {
    this.setState({
      name: e.target.dataset.name
    });
  };

  handleAge = e => {
    this.setState({
      age: e.target.dataset.age
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleName} data-name="Marcelo">
          Mudar Nome
        </button>
        <button onClick={this.handleAge} data-age="22">
          Mudar Idade
        </button>
        {this.state.name}
        {this.state.age}
      </div>
    );
  }
}

React.render(<Home />, document.getElementById("root"));

I updated the code.