title: Get closest parent element by class name in React
body: <p>Using React, how do I refer to parent element's closest element with certain classname?</p>
  
  <p>Code below:</p>
  
  <pre><code>const Skill = props =&gt; (
  &lt;div className="skill-card"&gt;
      &lt;div className="skill-header"&gt;
          &lt;div className="skill-header-text"&gt;
              &lt;div className="skill-header-img-container"&gt;
                  &lt;img src={require('../../img/projects/skills/' + props.skill.image)} alt={props.skill.name} className="skill-image" /&gt;
              &lt;/div&gt;
              &lt;div className="skill-heading"&gt;&lt;h2 className="skill-name"&gt;{props.skill.name}&lt;/h2&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="skill-header-icon"&gt;
              &lt;FontAwesomeIcon icon={"angle-" + props.angle} onClick={props.click} /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className="skill-body"&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  );
  
  class Skills extends Component {
      ...
  
      handleClick = () =&gt; {
          // Add style to the closest skill-body in here!
      }
  }
  </code></pre>
  
  <p>In this case, once I click the <code>FontAwesomeIcon</code>, I want the <code>div</code> element with className <code>skill-body</code> to open up.</p>
  
  <p>First I thought that using states would be good, but by far all the <code>skill-body</code> elements will open up upon clicking the <code>FontAwesomeIcon</code>. My approach would be just add stylings to <code>skill-body</code> (<code>display: block</code> and <code>display: none</code>).</p>
  
  <p>How can I refer to the <code>skill-body</code> inside the <code>Component</code>'s function with the <code>handleClick</code>?</p>
  
  <p>EDIT:
  Used HMR's functional component example, and I am still stuck.</p>
  
  <pre><code>const Skills = ({ skills }) =&gt; (
  &lt;div&gt;
      {skills.map(skill =&gt; (
          &lt;SkillContainer key={skill._id} skill={skill} /&gt;
      ))}
  &lt;/div&gt;
  );
  
  const Skill = ({ skill, open, toggle, data }) =&gt; (
      &lt;div&gt;
          &lt;h4 onClick={toggle}&gt;skill: {skill} {data.name}&lt;/h4&gt;
          {open &amp;&amp; &lt;div&gt;{data.description}&lt;/div&gt;}
      &lt;/div&gt;
  );
  
  const SkillContainer = ({ skill }) =&gt; {
      const [open, setOpen] = React.useState(false);
      const [data, setData] = React.useState({ skills: [] });
  
      const toggle = React.useCallback(() =&gt; setOpen(open =&gt; !open), []);
  
      useEffect(() =&gt; {
          const fetchData = async () =&gt; {
              const result = await         
                  axios("http://localhost:5000/api/skills/");
  
          setData(result.data);
      }
  
      fetchData();
  }, []);
  
  return React.useMemo(() =&gt; Skill({ skill, open, toggle, data }), [open, 
  skill, toggle, data]);
  }
  
  export default Skills;
  </code></pre>
  
  <p>Got to this point so far by reading the <code>useHook</code> documentations.
  What I want to do, is gather data with <code>axios</code> and then set the content with it.</p>