Q:

Retrieving React state value via dynamic variables

I am building a simple rgba selector which allows users to toggle the individual values via the arrow-up and arrow-down keys. Below is a snippet of my code.
class App extends Component {
  constructor(){
  super();
  this.state = {
   red: 0,
   green: 200,
   blue: 0,
   opacity: 1,
};
this.handleValueChange = this.handleValueChange.bind(this);
this.handleArrowKeysInput = this.handleArrowKeysInput.bind(this);

// for using up and down arrows to adjust the values
    handleArrowKeysInput = e => {
    const keyPressed = e.keyCode;
    let {id} = e.target;
    console.log(id); //returns red OR green OR blue
    console.log(this.state.id);

    // if up button is pressed
    if(keyPressed === 38){
      // if value is already 255, stop increment
      if(this.state.green >= 255) return;
      console.log(`up button is pressed`);
      this.setState({[id]: this.state.id + 1});
    }

    // if down button is pressed 
    else if(keyPressed === 40){
      // if value is already 0, stop decrement
      if(this.state.id <= 0) return;
      console.log(`down button is pressed`);
      this.setState({[id]: this.state.id - 1});
    }
  }

<input value={this.state.red} type="text" id="red" onChange=
  {this.handleValueChange} onKeyDown={this.handleArrowKeysInput}/>
console.log(id) returns the desired value red or green or blue.
However when i tried to console.log(this.state.id). It shows undefined.
Why is this so?

A:

Your code is a bit confusing probably because its not a Complete Example but I try to give you some options to fix it.
There is no id value on you initial state construction. 
Example
this.state = {
   red: 0,
   green: 200,
   blue: 0,
   opacity: 1,
   id: 0  // This should be here if you are going to use it
};

Secondly you are trying to add up 1 to a undefined value below;
this.setState({[id]: this.state.id + 1});

Because this.state.id is undefined, this.state[id] will be undefined too. But from what I understand from your code you are trying to set red, green and blue values, so your code should be like below;
this.setState({[id]: this.state[id] + 1});

Because you are trying to get a state value on the above code it is a better practice to use functional setState;
this.setState((prevState) => ({[id]: prevState[id] + 1}));

