Full Warning:
react-dom.development.js:2592 The specified value does not conform to the required format. The format is #rrggbb where rr, gg, bb are two-digit hexadecimal numbers.
The code IS WORKING FINE. It is doing what it is supposed to do, which is: each input changes the background color of the squares that appear/get updated once the button is pressed.
The only instance when the code was working and the warning was not appearing- was during development as i was messing with the color input and I was trying to change the background of a mockdiv that was part of the same component as the input. The second i lifted state it started behaving like this.
But the BEST PART IS: When I tell It to Console.log the this.state.color.hex (which is the value that changes the background color) It console.logs #00ff40 #ff0000 #0000ff AND #ffff00 - Which is why I have no idea how to get rid of this warning.
I don't think this error is caused by the changeHandler function. I have had MANY different versions of this function and it has had little impact on this warning. As well, the other question to this warning (Warning when using color control in React JS ) has another completely different version of a changeHandler function and still has the same error. AND I originally had a one single changeHandler function for all instances of the value color prop, and the error was still there. BUT if it is- I would love to know how to change it if it means getting rid of this warning.
The structure summary is:
Checkbox => ButtonPerSquare =>HOME
Squares => SquaresWrapper =>HOME
Then Home merges the two and renders the squares on the click of the button, which is also on Home.
Checkbox.js: //i know is not a befitting name, but it was already called like that on my template for each new project.
import React from react;
class CheckBoxes extends React.Component {
render() {
return (
<div>
<input
type={this.props.type}
className={this.props.class}
value={
this.props.class === input1
? this.props.color1
: this.props.class === input2
? this.props.color2
: this.props.class === input3
? this.props.color3
: this.props.class === input4
? this.props.color4
: console.log(blue)
}
onChange={
this.props.class === input1
? event => this.props.handleChange1(event)
: this.props.class === input2
? event => this.props.handleChange2(event)
: this.props.class === input3
? event => this.props.handleChange3(event)
: this.props.class === input4
? event => this.props.handleChange4(event)
: console.log(blue)
}
/>
<span>{this.props.sp1}</span>
</div>
);
}
}
export default CheckBoxes;
ButtonPerSquare.js:
import React, { Component } from react;
import Checkboxes from ./Checkboxes;
// import ./../App.css;
const numbers = [1, 2, 3, 4];
// const colors = [#ffffff, #F7E3B3, #71EB92, #000fff];
const classes = [input1, input2, input3, input4];
class HeaderButtons extends Component {
render() {
//sp is for the span element in the Checkboxes function.
return (
<header className={this.props.headerClass}>
{numbers.map((nums, col) => {
// const keys = numbers[nums];
// console.log(keys);
return (
<Checkboxes
color1={this.props.color1}
color2={this.props.color2}
color3={this.props.color3}
color4={this.props.color4}
// color2={this.props.color2}
// color3={this.props.color3}
// color4={this.props.color4}
handleChange1={event => this.props.handleChange1(event)}
handleChange2={event => this.props.handleChange2(event)}
handleChange3={event => this.props.handleChange3(event)}
handleChange4={event => this.props.handleChange4(event)}
//this.props.handleChange}
background={this.props.background}
// className=ColorInput
// color={this.props.color}
sp1={nums}
key={nums}
type=color
// defaultValue={colors[col]}
class={classes[col]}
// value=red
/>
);
})}
{/* one parethesis for return.. one curly for the funct... another parenthesis for map... and the blue curly THEN closing header */}
</header>
);
}
}
export default HeaderButtons;
Square.js
import React, { Component } from react;
class Squares extends Component {
render() {
return (
<div
id={this.props.id}
className=Square
style={{
background:
this.props.id === square1
? this.props.background1
: this.props.id === square2
? this.props.background2
: this.props.id === square3
? this.props.background3
: this.props.id === square4
? this.props.background4
: console.log(blue)
}}
>
Blue
</div>
);
}
}
export default Squares;
SquaresWrapper.js:
import React, { Component } from react;
import Squares from ./Squares;
// import ./../App.css;
const numbers = [1, 2, 3, 4];
// const backgrounds = [#ffffff, #F7E3B3, #71EB92, #000fff];
const classes = [square1, square2, square3, square4];
class SquaresWrapper extends Component {
// constructor(props) {
// super(props);
// this.state = {};
// }
render() {
//sp is for the span element in the Checkboxes function.
return (
<section className={this.props.sectionClass}>
{numbers.map((nums, col) => {
// const keys = numbers[nums];
// console.log(keys);
return (
<Squares
id={classes[col]}
key={nums}
background1={this.props.background1}
background2={this.props.background2}
background3={this.props.background3}
background4={this.props.background4}
// value=red
/>
);
})}
{/* one parethesis for return.. one curly for the funct... another parenthesis for map... and the blue curly THEN closing header */}
</section>
);
}
}
export default SquaresWrapper;
Home:
import React, { Component } from react;
import HeaderButtons from ./ButtonPerSquare;
import ReactDOM from react-dom;
// import Paragraph from ./Paragraph;
import SquaresWrapper from ./squaresWrapper;
class Home extends Component {
constructor(props) {
super(props);
this.state = {
color1: { hex: },
color2: { hex: },
color3: { hex: },
color4: { hex: }
};
}
render() {
return (
<div className=creatorDiv>
<HeaderButtons
color1={this.state.color1.hex}
color2={this.state.color2.hex}
color3={this.state.color3.hex}
color4={this.state.color4.hex}
handleChange1={event =>
this.setState({
color1: { hex: event.target.value }
})
}
handleChange2={event =>
this.setState({
color2: { hex: event.target.value }
})
}
handleChange3={event =>
this.setState({
color3: { hex: event.target.value }
})
}
handleChange4={event =>
this.setState({
color4: { hex: event.target.value }
})
}
headerClass=HeaderDiv
/>
<button
onMouseDown={() =>
ReactDOM.render(
<SquaresWrapper
sectionClass=squaresWrapper
background1={this.state.color1.hex}
// {this.state.color1}
background2={this.state.color2.hex}
// {this.state.color2}
background3={this.state.color3.hex}
// {this.state.color3}
background4={this.state.color4.hex}
// {this.state.color4}
/>,
document.getElementById(blue)
)
}
>
Create Color
</button>
<div id=blue></div>
</div>
);
}
}
export default Home;
