I'm working on a React project and I'm having trouble passing a value to an event handler and then updating state to contain that value so that I can use conditional rendering later on.

Here is my constructor/state :

```
 constructor(props) {
    super(props);
    this.state = {
      waterImg: `https://thumbs.dreamstime.com/b/small-water-drop-splash-crown-14698311.jpg`,
      fireImg: `http://d.stockcharts.com/img/articles/2017/09/15057727422401691285382.jpg`,
      image: ""
    };
  }

```

I have two divs, red and blue. When red is clicked I want to update `this.state.image` to contain "fire", and when blue is clicked I want to update it to "water". Then I want to use conditional rendering to render the appropriate fire/water image.

```
  handleClick = e => {
    this.setState({
      image: // Want to update image state to either fire or water depending on which div is clicked
    });
  };

  render() {
    return (
      <Styles>
        // How do I pass handleClick the value fire from here?
        <div className="red" onClick={this.handleClick} />

        // How do I pass handleClick the value water from here?
        <div className="blue" onClick={this.handleClick} />

        {
          this.state.image === "water" ?
            <img src={this.state.waterImg} height="100" alt="water pic"/>
          : ""
        }

        {
          this.state.image === "fire" ?
          <img src={this.state.fireImg} height="100" alt="fire pic"/>
          : ""
        }

      </Styles>
    );
  }
}

```

Mainly I'm having trouble passing a value from the onClick functions to the handleClick function. I've tried something like this:

`<div className="red" onClick={(e) => this.handleClick(e)} />`

But I still can't figure out have to pass a value to handleClick and then update state to contain that value.

Here is a [Code Sandbox](https://codesandbox.io/s/staging-sky-qk2l8)