title: React label picker component
body: <p>I have a label input react component that generates a bunch of colored squares that the user should click on to set the currently selected color. </p>
  
  <p>I am not sure how to handle the selection and setting of state, should I pass a function to the parent component or handle it here? How would I set the selected label in state? I am new to react and things aren't clicking well </p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import styled from 'styled-components';
  
  
  type Props = {
    select: (e) =&gt; void,
    selected: bool,
    selectedColor: string
  };
  
  class LabelInputComponent extends React.Component {
    constructor(props: Props){
      super(props)
  
      this.handleColorSelect = this.handleColorSelect.bind(this);
    }
  
    handleColorSelect(e){
      this.props.selectedColor = e.target.getAttribute('color')
    }
  
    render(){
      return(
        &lt;div&gt;
          &lt;StyledSelectBoxDiv backgroundColor="#FFFFFF" onClick={(e) =&gt; this.props.select}/&gt;
          &lt;StyledSelectBoxDiv backgroundColor="#00C864" onClick={(e) =&gt; this.props.select}/&gt;
          &lt;StyledSelectBoxDiv backgroundColor="#19C8C8" onClick={(e) =&gt; this.props.select}/&gt;
          &lt;StyledSelectBoxDiv backgroundColor="#1996E1" onClick={(e) =&gt; this.props.select}/&gt;
          &lt;StyledSelectBoxDiv backgroundColor="#964BAF" onClick={(e) =&gt; this.props.select}/&gt;
          &lt;StyledSelectBoxDiv backgroundColor="#FA327D" onClick={(e) =&gt; this.props.select}/&gt;
          &lt;StyledSelectBoxDiv backgroundColor="#FA3232" onClick={(e) =&gt; this.props.select}/&gt;
          &lt;StyledSelectBoxDiv backgroundColor="#FA7D00" onClick={(e) =&gt; this.props.select}/&gt;
          &lt;StyledSelectBoxDiv backgroundColor="#FAC800" onClick={(e) =&gt; this.props.select}/&gt;
          &lt;StyledSelectBoxDiv backgroundColor="#BEC3C8" onClick={(e) =&gt; this.props.select}/&gt;
          &lt;StyledSelectBoxDiv backgroundColor="#3E474B" onClick={(e) =&gt; this.props.select}/&gt;
        &lt;/div&gt;
      )
    }
  }
  
  
  
  
  const StyledSelectBoxDiv = styled.div.attrs({
      type: 'text',
      selected: props =&gt; props.selected,
      color: props =&gt; props.backgroundColor
    })`
      background-color: ${props =&gt; props.backgroundColor};
      width: 18px;
      height: 18px;
      float: left;
      margin-right: 5px;
    `;
  
  const mapStateToProps = state =&gt; {
    return {
    };
  };
  
  const mapDispatchToProps = dispatch =&gt; ({
  
  });
  
  export default connect(mapStateToProps, mapDispatchToProps)(LabelInputComponent);
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/A4FSW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A4FSW.png" alt="enter image description here"></a></p>