Warning when using color control in React JS

Question

I am using React JS with Babel and Webpack. Everything has worked fine with my other scripts even ones that use the color module, however, one of my scripts is giving me the following error:

The specified value "" does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

My code is as follows:

import React from 'react';

class EditDetails extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            bg: "#ffffff"
        };
    }

    handleChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const id = target.id;

            this.setState({
                [id]: value
            });
    }




  render() {
      return (
            <div>
                 <form>
                    <div>Background Colour:<input id="bg" type="color" onChange={this.handleChange.bind(this)} value="#dddddd" /></div>
                  </form>
            </div>
      )
  }
}

export default EditDetails;

If I remove the value="#dddddd" from my input tag it actually gives the same error message twice.

Upon further investigation, the error reference points me to the following section in ReactDOMInput.js:

switch (props.type) {
  case 'submit':
  case 'reset':
    break;
  case 'color':
  case 'date':
  case 'datetime':
  case 'datetime-local':
  case 'month':
  case 'time':
  case 'week':
    // This fixes the no-show issue on iOS Safari and Android Chrome:
    // https://github.com/facebook/react/issues/7233
    node.value = '';
    node.value = node.defaultValue;
    break;
  default:
    node.value = node.value;
    break;
}

Specifically it is referring to the first node.value line (or the first two node.value lines when I remove the value attribute).

Why is this error being generated when I have the colour code in the correct hexadecimal format?

Note: The correct colour does indeed appear correctly set in the color control.

Answer 1

I am technically on the same error, but i don't think it has nothing to do with onChange. Simply because my onChange function is different from the one in the question and I already had a different working version of my code that was working with onChange. The one in the question:

handleChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const id = target.id;

            this.setState({
                [id]: value
            });
    }

Versus Mine:

handleChange = event => {
    this.setState({ value: event.target.value });
  };

And we BOTH get the same error, regardless of the difference in the structure of our onChange functions.

In case it might help anyone else though- this is a version that works:

class CheckBoxes extends React.Component {
  constructor(props) {
    super(props);
    this.state = { color: "" };
  }

  handleChange = event => {
    this.setState({ color: event.target.value });
  };
  render() {
    // const [initial, setInitial] = useState("#5e72e4");
    // const [color, setColor] = useState({});

    return (
      <div>
        <input
          type="color"
          value={this.state.color}
          onChange={this.handleChange}
        />
        <div
          style={{
            width: 50,
            height: 50,
            marginBottom: 20,
            backgroundColor: this.state.color
          }}
        ></div>
        <br />
        {/* <InputColor initialHexColor={initial} onChange={setColor} /> */}
      </div>
    );
  }
}
export default CheckBoxes;

Basically: backgroundColor of div will change when the value of the input changes.