title: Event Handling - React
body: <p>I have a <code>popover</code> inside which there are <code>Colors</code> components with different colors. Also there is a icon  <code>DoneIcon</code> which (for time being) is placed inside the <code>Colors</code> component. What I'm trying to achieve is:</p>
  <ol>
  <li>After hovering when I select a color(with no icon inside), <code>DoneIcon</code> should be placed inside it. To generalize when a color is selected it should have <code>DoneIcon</code> and the icon should disappear from the previously selected color.</li>
  <li>When the color is selected the background color of (its parent) <code>div</code> with <code>class=&quot;box&quot;</code> should change to the selected color. I know this can be achieved with event handling by having functions for each color(out of 12 colors) which will be executed <code>onClick</code>, but how can I have only one function which will detect the color from <code>props.color</code> when <code>onClick</code> event executes and apply the color to <code>box</code>.</li>
  </ol>
  <p>Here is the link for <a href="https://codesandbox.io/s/color-palette-9i350?file=/src/Colors.jsx" rel="nofollow noreferrer">CodeSandbox</a></p>