React 中 JS 表达式中的变量

Question

这是我的 React 代码：

const colors = ["RED", "BLUE", "GREEN", "YELLOW"];

// in class component 

constructor(props) {
  super(props);

  // these are filled in somewhere else in the code, but not shown here
  this.state = {
    redFiles: [],
    blueFiles: [],
    greenFiles: [],
    yellowFiles: []
  }
}

//somewhere else in the code:

render() {
  <div>
    {colors.map( color => 
      {this.state._____Files.length}      // problem area: how do I put color.toLowerCase() variable within that blank 
  </div>
}

在指示的“问题区域”中，如何将

color.toLowerCase()

变量放入该空白中，以便我们有

this.state.redFiles.length

、

this.state.blueFiles.length

、

this.state.greenFiles.length

和

this.state.yellowFiles.length

？