title: How to make onClick function fire on the click of an icon?
body: <p>I'm trying to set up an onClick function for a FontAwesome plus sign icon. The icon only appears next to any element that does not have children (aka in my nested menu, the elements that do not have more elements within it). When I test the <code>onClick</code> by doing, <code>console.log</code> it seems that any time I click an element in the menu, it fires either twice or four times. Does anyone know what I can do to make it only fire when the plus icon is clicked? Or why it fires any time any element is clicked? See screenshots below for more details.</p>
  
  <pre><code>class MenuTest extends React.Component {
    state = {
      categories: [],
      objectKeys: null,
      tempKeys: []
    };
  </code></pre>
  
  <p>Here is where I have set up the <code>onClick</code>, within the FontAwesome plus sign tag.</p>
  
  <pre><code>  makeMenuLayer = layer =&gt; {
      const { objectKeys } = this.state;
      const layerKeys = Object.entries(layer).map(([key, value]) =&gt; {
  {/*if the element still has children, insert an arrow, if not, insert nothing*/}      
  var arrow = Object.keys(value).length ? (
          &lt;FontAwesome name="angle-right" /&gt;
        ) : (
          ""
        );
  {/*if the element has no children, insert a plus sign, if not, insert nothing*/}
        var ex =
          Object.keys(value).length === 0 ? &lt;FontAwesome name="plus" onClick={console.log("clicked")} /&gt; : "";
        return (
          &lt;ul key={key}&gt;
            &lt;div onClick={() =&gt; this.handleShowMore(key)}&gt;
              {key} {arrow} {ex}
            &lt;/div&gt;
  
            {objectKeys[key] &amp;&amp; this.makeMenuLayer(value)}
          &lt;/ul&gt;
        );
      });
      return &lt;div&gt;{layerKeys}&lt;/div&gt;;
    };
  
    handleShowMore = key =&gt; {
      this.setState(prevState =&gt; ({
        objectKeys: {
          ...prevState.objectKeys,
          [key]: !this.state.objectKeys[key]
        }
      }));
    };
  
    initializeTempKeys = layer =&gt; {
      // eslint-disable-next-line
      Object.entries(layer).map(([key, value]) =&gt; {
        const newTempKeys = this.state.tempKeys;
        newTempKeys.push(key);
        this.setState({ tempKeys: newTempKeys });
        this.initializeTempKeys(value);
      });
    };
  
    initializeObjectKeys = () =&gt; {
      const { tempKeys } = this.state;
      let tempObject = {};
      tempKeys.forEach(tempKey =&gt; {
        tempObject[tempKey] = true;
      });
  
      this.setState({ objectKeys: tempObject });
    };
  
    componentDidMount() {
      axios.get("https://www.ifixit.com/api/2.0/categories").then(response =&gt; {
        this.setState({ categories: response.data });
      });
      const { categories } = this.state;
      this.initializeTempKeys(categories);
      this.initializeObjectKeys();
      this.setState({ categories });
    }
  
    render() {
      const { categories } = this.state;
      return &lt;div&gt;{this.makeMenuLayer(categories)}&lt;/div&gt;;
    }
  }
  </code></pre>
  
  <p>this is how my menu looks when some of the elements are expanded. I want the <code>onClick</code> only to fire when the plus sign next to Necktie is clicked.
  <a href="https://i.stack.imgur.com/QXXAO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QXXAO.png" alt="enter image description here"></a></p>
  
  <p>This is what shows up in the console when I try to test it</p>
  
  <p><a href="https://i.stack.imgur.com/heE8j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/heE8j.png" alt="enter image description here"></a></p>
  
  <p>The data I am working with:
  <a href="https://i.stack.imgur.com/svKQH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/svKQH.png" alt="enter image description here"></a></p>