if(event1){
 state=true
 return <Component1 open="state">
}
//same code
if(event2){...}
// same code
if(event3){...}

<Component1 />
<Component2 />
<component3 />

<Component1 open={this.state.open} />
<Component2 open={this.state.open} />
<component3 open={this.state.open} />

class Index extends Component {
constructor(props){
super(props);
 this.state = {
  open = false
 }
}

handleClose = () => {
 this.setState({
   open: false
  })
}

handleOpen = () => {
  this.setState({
    open: true
  })
}

render(){
  let event1 = "string";
  let event2 = "string";
  let event3 = "string";
  let receptacleEvent = [];
  document.onkeydown = event => {
  return (
    receptacleEvent.push(event.key)
    if (receptacle.toString().indexOf(event1) >=0){
      this.handleOpen()
      return <Component1 open={this.state.open} close={this.handleClose.bind(this) />
    }
    if (receptacle.toString().indexOf(event2) >=0){
      this.handleOpen()
      return <Component2 open={this.state.open} close={this.handleClose.bind(this) />
    }
    if (receptacle.toString().indexOf(event3) >=0){
      this.handleOpen()
      return <Component3 open={this.state.open} close={this.handleClose.bind(this) />
    }
   )
  }
 }
}