React: Pass value of HTML element to event handler onClick

Question

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

Answer 1

There are a few ways how you could do that:

• Binding a function argument with .bind() :

<div className="red" onClick={this.handleClick.bind(null, this.state.fireImg)} />
<div className="blue" onClick={this.handleClickthis.handleClick.bind(null, this.state.waterImg)} />

handleClick = (image, e) => {
    this.setState({ image });
  };

• Use an arrow function:

<div className="red" onClick={() => this.setState({image: this.state.fireImg})} />
<div className="blue" onClick={() => this.setState({image: this.state.waterImg})} />

• Use the className (or any other attribute) to find out which element was clicked:

handleClick = e => {
    let image;
    if(e.target.className === "red")
      image = this.state.fireImg;
    else
      image = this.state.waterImg;
    this.setState({image});
  };

Answer 2

You can use currentTarget.getAttribute() to fetch the values

  handleClick(e) {
    const name = e.currentTarget.getAttribute("name");
    if (name === 'red') this.setState({image: this.state.fireImg})
    else if (name === 'blue') this.setState({image: this.state.waterImg})
  }

  render() {
    return (
      <Styles>
        <div className="one" name="red" onClick={this.handleClick} />

        <div className="two" name="blue" onClick={this.handleClick} />

        <div className="three" />
      </Styles>
    );
  }