Hi I'm a beginner in ReactJS and I'm making a memory game with it and have problems with revealing tiles.
I wanted to have a few values in parent component's state, like firstPick, secondPick, pickCount and also isHidden (this toggles icon visibility). 
But putting it in parent component makes click on any button toggle icon on every tile. To solve this, I moved isHidden property to Button (child) component. Now i wanted to manipulate state of Button from its parent component, so I found information about using refs somewhere in the internet. But using them makes clicking every button only toggle the last button in the container. I suppose i messed up something.
So my Button components looks like this: 

```js
class Button extends Component {
  state = {isHidden: true};

  toggleHidden () {
    this.setState({isHidden: !this.state.isHidden});
  } 

  render() {
    return (
      <div>
        <button className="tile" onClick={this.props.onClick}>
          <i
            className={this.props.icon}
            style={
              this.state.isHidden ? { display: "none" } : { display: "block" }
            }
          />
        </button>
      </div>
    );
  }
}
```

and my Board components looks like this:

```js
class Board extends Component {
  state = { firstPick: "", secondPick: "", pickCount: 0 };
  constructor(props) {
    super(props);
    this.buttonElement = React.createRef();
  }

  handleClick = () => {
    this.buttonElement.current.toggleHidden();
    this.setState({
      firstPick: this.icon,
      pickCount: this.state.pickCount + 1
    });
    alert(this.state.firstPick);
  };
  render() {
    return (
      <div className="board">
        <div className="container">
          <div className="row align-items-start">
            <div className="col-3">
              <Button
                ref={this.buttonElement}
                icon={animalArray[0]}
                onClick={this.handleClick}
              />
```

Of course there are 11 other Button components here, but they look just the same. (Btw is there a way to not repeat this code? They are placed in bootstrap container).
I also have 1 bonus question. Is there a way to set the state.firstPick to the icon property? I don't know how to refer to this value from the Parent component method. I tried writing this.icon, but i don't think it works. I wanted to keep two choices in state variables and then compare them. Or is there maybe a better way to solve this problem? Thanks