title: React JS color picker inside form
body: <p>I've been struggling with this all day. Really new to react so apologies in advanced. </p>
  
  <p>I'm trying to use <a href="https://github.com/mozilla-services/react-jsonschema-form" rel="nofollow noreferrer">react-jsonschema-form</a> to create form from json with <a href="https://github.com/casesandberg/react-color" rel="nofollow noreferrer">react-color</a>.</p>
  
  <p>This is what I have now:</p>
  
  <pre><code>import React, {Component} from "react";
  import {ChromePicker} from 'react-color';
  import Form from "react-jsonschema-form";
  
  const ColorPicker = (props) =&gt; {
      return (
          &lt;ChromePicker
              color={props.value || false}
              value={props.value}
              onChange={(event) =&gt; {
                  props.onChange(event.color)
              }}
          /&gt;
      )
  }
  const schema = {
    "type": "object",
    "properties": {
      "base": {
        "type": "object",
        "title": "Global settings",
        "properties": {
          "line-height": {
            "title": "Body line height",
            "type": "number"
          },
          "background-color": {
            "title": "Body background color",
            "type": "string"
          },
          "font-color": {
            "title": "Body background color",
            "type": "string"
          }
        }
      }
    }
  }
  const uiSchema = {
      base:{
          "background-color":{
              'ui:widget':ColorPicker
          },
          "font-color":{
              'ui:widget':ColorPicker
          }
  
      }
  }
  export default class GeneratorForm extends Component {
      constructor(props) {
          super(props);
          this.handleChange = this.handleChange.bind(this);
      }
      handleChange(data) {
              console.log(data)
      }
      render() {
          return (
              &lt;Form schema={schema}
                    uiSchema={uiSchema}
                    //onBlur={this.handleSubmit}
                    onChange={this.handleChange}
                    //onSubmit={this.handleSubmit}
                    onError={log("errors")}/&gt;
          );
      }
  }
  </code></pre>
  
  <p>Simple form with two colorpickers. And the colorpicker works great, except in the handleChange, formData for that field is empty. It's like the value isn't assigned. I've searched for similar topics, somethings similar with datepicker<a href="https://github.com/Hacker0x01/react-datepicker/issues/1051" rel="nofollow noreferrer">3</a> and that gave me an idea to make it simple (had some crazy code, custom class component and so on).</p>
  
  <p>So the question is, how to pass a value from color picker to form value?
  Thanks in advance.</p>