Reactjs 如何将此状态数组值连接到div元素

我正在学习React，我被困在以下语法上

class App extends React.Component{

  constructor(){
    super()
    this.state = {
      array: [1,2]

    }
        this.add = this.add.bind(this)
  }
  add(){
    this.setState = {

      array:[5,4]

    }
  }
  render(){
    const arr = this.state.array.map((val) => {
      return val
    });
      ///how to connect arr to div target_here
    return(
      <div>
        <button onClick={this.add}>Button</button>
        <div id="target_here"></div>
         <button>Button</button>
      </div>
    )
  }

}


ReactDOM.render(<App />, document.getElementById("app"))

类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
数组：[1,2]
}
this.add=this.add.bind（this）
}
添加（）{
this.setState={
数组：[5,4]
}
}
render（）{
const arr=this.state.array.map（（val）=>{
返回值
});
///如何在此处将arr连接到div target_
返回(
按钮
按钮
)
}
}
ReactDOM.render（，document.getElementById（“app”））

---

我的目标是将const arr附加到此处的id目标上。这是我面临的问题的示例语法，因此我非常欣赏不改变语法结构的解决方案。请帮忙

我没有完全理解这个问题，但是如果您试图显示数组，您可以执行以下操作：

  return(
    <div>
      <button onClick={this.add}>Button</button>
      <div id="target_here"></div>
       {arr}
       <button>Button</button>
    </div>

返回(
按钮
{arr}
按钮

以下是一个您试图完成的工作示例：

class App extends React.Component {

  constructor(){
    super()
    this.state = {
      array: [1,2]

    }

    this.add = this.add.bind(this)
  }

  add() {
    this.setState({
      array: [5,4]
    })
  }

  render(){
    const list = this.state.array.map(value => {
      return <li>{value}</li>
    });

    return(
      <div>
        <button onClick={this.add}>Button</button>
        <div id="list">
          <ul>{list}</ul>
        </div>
         <button>Button</button>
      </div>
    )
  }

}

ReactDOM.render(<App />, document.getElementById('app'))

类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
数组：[1,2]
}
this.add=this.add.bind（this）
}
添加（）{
这是我的国家({
数组：[5,4]
})
}
render（）{
const list=this.state.array.map（值=>{
返回
{value}
});
返回(
按钮
{list}
按钮
)
}
}
ReactDOM.render（
为什么需要数组作为id值？我希望数组的值专门显示在目标区域上。就在两个按钮之间