title: React JS Parent Child Component Events Sharing
body: <p>Below are my react components, Here I am trying to create Parent component which is responsible for getting keyboard event 'keyPressed' and whichever key is pressed it should remove a matching child  component from view.</p>
  
  <p>Your help and suggestions are appreciated.</p>
  
  <p><strong>PARENT COMPONENT</strong>
  This component is responsible for creating characters (a-z, A-Z) array and create a board to display each character as a child named ball component.</p>
  
  <pre><code>import React, { Component } from "react";
  import Ball from "./Ball";
  
  export default class Board extends Component {
    constructor(props) {
      super(props);
      this.state = {
        letters: []
      };
      this.shuffle = this.shuffle.bind(this);
      this.handleEvent = this.handleEvent.bind(this);
    }
  
    componentDidMount() {
      const self = this;
      let letters = [];
  
      // small a - z
      for (let i = 97; i &lt; 123; i++) {
        letters.push({ letter: String.fromCharCode(i), code: i });
      }
  
      // capital A - Z
      for (let i = 65; i &lt; 91; i++) {
        letters.push({ letter: String.fromCharCode(i), code: i });
      }
  
      this.setState(state =&gt; ({
        letters: self.shuffle(letters)
      }));
    }
  
    shuffle(arr) {
      var ctr = arr.length,
        temp,
        index;
  
      // While there are elements in the array
      while (ctr &gt; 0) {
        // Pick a random index
        index = Math.floor(Math.random() * ctr);
        // Decrease ctr by 1
        ctr--;
        // And swap the last element with it
        temp = arr[ctr];
        arr[ctr] = arr[index];
        arr[index] = temp;
      }
      return arr;
    }
  
    handleEvent(e) {
      const k = e.charCode;
      // HELP NEEDED HERE
      // Need to find matching children component of Ball to trigger its own setVisibility method.
    }
  
    render() {
      let ball = this.state.letters.map(item =&gt; {
        return &lt;Ball key={item.code} properties={item} bouncing={true} /&gt;;
      });
  
      return (
        &lt;div
          className="overlay-full game"
          onKeyPress={event =&gt; this.handleEvent(event)}
          tabIndex="0"
        &gt;
          &lt;div className="bubble-wrapper"&gt;{ball}&lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>CHILD COMPONENT</strong>
  every Ball component should have its own state for visibility if its state is visible than only it will render on-screen otherwise it should do nothing.</p>
  
  <pre><code>import React, { Component } from "react";
  
  export default class Ball extends Component {
    constructor(props) {
      super(props);
      this.getRandomSize = this.getRandomSize.bind(this);
      this.getRandomColor = this.getRandomColor.bind(this);
      this.setVisibility = this.setVisibility.bind(this);
      this.state = {
        isVisible: true,
        code: this.props.properties.code,
        letter: this.props.properties.letter
      };
  
      this.ballRef = null;
      this.setBallRef = element =&gt; {
        this.ballRef = element;
      };
    }
    getRandomSize() {
      const sizes = ["size-1", "size-2", "size-3", "size-4"];
      return sizes[Math.floor(Math.random() * 4)];
    }
    getRandomColor() {
      const colors = [
        "#55efc4",
        "#81ecec",
        "#74b9ff",
        "#a29bfe",
        "#00b894",
        "#00cec9",
        "#0984e3",
        "#6c5ce7",
        "#ffeaa7",
        "#fab1a0",
        "#ff7675",
        "#fd79a8",
        "#fdcb6e",
        "#e17055",
        "#d63031"
      ];
      return colors[Math.floor(Math.random() * 15)];
    }
    setVisibility(key) {
      if (this.state.code === key) {
        this.setState(state =&gt; ({
          isVisible: false
        }));
      }
    }
    render() {
      const { code, letter } = this.state;
      const isBouncing = this.props.bouncing ? "bouncing" : "";
      const isVisible = this.state.isVisible;
      const size = this.getRandomSize();
      const inlineStyle = {
        backgroundColor: this.getRandomColor()
      };
  
      if (isVisible) {
        return (
          &lt;div
            className={`ball-${code} ${size} ${isBouncing}`}
            style={inlineStyle}
            ref={this.setBallRef}
          &gt;
            {letter}
          &lt;/div&gt;
        );
      } else {
        return null;
      }
    }
  }
  
  </code></pre>