react todo list

let data = [
  { id: 0, column: "_id", type: "t", popular: 0 },
  { id: 1, column: "_index", type: "t", popular: 1 },
  { id: 2, column: "_type", type: "t", popular: 0 },
  { id: 3, column: "collectTime", type: "#", popular: 0 },
  { id: 5, column: "logLine", type: "t", popular: 1 },
  { id: 6, column: "svr_ip", type: "t", popular: 0 },
]

constractor(props){
this.state={data:[]}}
componentDidMount(){
data.forEach(i=>{i.selected=false})
this.setState({data})
}

return(
<Sider style={{ width: "500px" }}>
              <Card
                title="selected"
                bordered={false}
                style={{ width: "200px" }}
              >
                <Collapse style={{ width: "100%" }}>
                  {selectedPanelList}
                </Collapse>
              </Card>
              <Card title="avalible" bordered={false}>
                <Collapse className="avalibleBox">
                 {this.state.data.filter( i=>i.selected===false && i.popular===1).length>0?
(<div className="popularTitle">popular</div>):""}
                  {avaliblePanelList}
                </Collapse>
              </Card>
            </Sider>)

 const selectedPanelList =
      this.state.data.filter(item => item.selected).length > 0 ? (
        this.state.data
          .filter(item => item.selected)
          .map(({ id, type, column, selected }, index) => (
            <Panel
              header={panelHeader(type, column)}
              key={index}
              extra={panelExtra(column, selected, "remove")}
            >
              <div>{text}</div>
            </Panel>
          ))
      ) : (
        <Panel header={panelHeader("?", "_sourse")} key="0">
          <div>{text}</div>
        </Panel>
      )
    const avaliblePanelList = this.state.data
      .filter(item => !item.selected)
      .sort((x, y) => y.popular - x.popular)
      .map(({ id, type, column, selected, popular }, index) => (
        <Panel
          className={popular ? "popular" : ""}
          header={panelHeader(type, column)}
          key={index}
          extra={panelExtra(column, selected, "add")}
        >
          <div>{text}</div>
        </Panel>
      ))

const panelHeader = (type, column) => (
      <span>
        <b style={{ fontWeight: "bold" }}>{type}</b> {column}
      </span>
    )
    // add/remove按钮事件
    const panelExtra = (column, selected, content) => (
      <Button
        onClick={event => {
          event.stopPropagation()
          let newdata = this.state.data.map(item => {
            if (item.column === column) {
              item.selected = !selected
            }
            return item
          })
        // 其他的交互操作
          let newColums = this.state.columns
          if (content === "remove") {
            newColums = newColums.filter(item => item.dataIndex !== column)
          } else if (content === "add") {
            newColums.push({ title: column, dataIndex: column, key: column })
          }
      
          this.setState({
            data: newdata,
            columns: newColums,
          })
        }}
      >
        {content}
      </Button>
    )