Как сделать поля привязанные к этому блоку?

Есть такой код

 import React, { Component } from 'react';
import './App.css';
class App extends Component {
    constructor(props){
        super(props)
    this.state = {
      data:[
          {
              id:"1",title:"some-text1",color:"#088A85"
          },
          {
              id:"2",title:"some-text2",color:"#0B2F3A"
          },
          {
              id:"3",title:"some-text3",color:"#0B0B3B"
          },
          {
              id:"4",title:"some-text4",color:"#2A0A29"
          },
          {
              id:"5",title:"some-text5",color:"#B4045F"
          },
          {
              id:"6",title:"some-text6",color:"#FA58F4"
          },
          {
              id:"7",title:"some-text7",color:"#A9BCF5"
          },
          {
              id:"8",title:"some-text8",color:"#58FA82"
          },
          {
              id:"9",title:"some-text9",color:"#A9F5F2"
          },
          {
              id:"10",title:"some-text10",color:"#CED8F6"
          }
      ],
        open:false
    }
    }
    toggleOpen = () =>{
    this.setState({open:!this.state.open})
}
  render() {
      var className = this.state.open? "opened" : "closed";
    return (
        <div>
            {
            this.state.data.map((block,id)=>{
                return (
                <div key={block.id} className="block" >
        <div style={{width:100,height:100,backgroundColor:block.color}} onClick = {this.toggleOpen}><p>{block.title} </p></div>
       <div className={className}>
             <input type="text" placeholder="color" />
             <input type="text" placeholder="text" />
        </div>
        </div>
                )
            })
            }
        </div>
    )
  }
}
export default App;

Нужно сделать два input-a, привязанные к этому блоку.Чтобы при клике на блок, открывались инпуты связанные с этим блоком и изменяли его значения block.color и block.title.Как лучше всего это сделать?