如下面的屏幕截图所示，如何将数据从第一张图像更改为第二张图像？

Question

我可以知道如何将数据从第一张图像更改为第二张图像，如下面的屏幕快照所示吗？

第一张图片

第二张图片

我只想使用温度数据仅在图表上显示。我正在使用React来做到这一点。我已经尝试过下面的代码，但是它具有以下屏幕截图中的错误。那我可以知道怎么做吗？谢谢。

let tempData = temperatureData.map(temp => 
    <div>temp.temperature</div>
  );

编辑并应用代码后：

代码：

getTempData(){
 return this.props.mqtt.byTopic.undefined;
}

const temperatureData = this.getTempData();

<MuiThemeProvider>
 <div style={styles}>
  <h1>D3 charts in React 16.3 {"\u2728"}</h1>
   <p>Click the button </p>
    <RaisedButton
     label={"The Button"}
     secondary={true}
     onClick={this.addData}
    />
   <p>
    {temperatureData.length} datapoints
   <br />
   <small>{currentIndex !== null ? data[currentIndex] : ""}</small>
   </p>
    <svg width="100%" height="500">
     <BarChart
      data={temperatureData}
      width={500}
      height={250}
      x={0}
      y={0}
      highlightBar={this.setCurrentIndex}
      highlightedBar={currentIndex}
     />
    </svg>
   </div>
 </MuiThemeProvider>