score:1

Accepted answer

the problem is that you are only using this.state.color in your render() function. this means that when the box is empty, you're trying to set the css background-color to "let's pick a color".

you also only set this.state.color to respond to the change event. but then when you go to reset it (when colorinput === ''), you set this.state.color and this.state.backgroundcolor? you need to be setting this.state.backgroundcolor from the beginning!

sidenote: you should honestly rename this.state.color to something like this.state.colorlabel, or better, this.state.headinglabel or something. it is just for the label, not the color. therefore, calling it color results in confusion, as can be seen in some of the other answers.

so you want:

changecolor(event) {
    var colorinput = document.getelementbyid('colorinput').value;
    this.setstate({
      color: event.target.value,
      backgroundcolor: event.target.value
    });
    if (colorinput === '') {
      this.setstate({
        color: "let's pick a color",
        backgroundcolor: "#fff"
      });
    }
  }

and

render () {
    var styleobj = {
      backgroundcolor: this.state.backgroundcolor,
    };

    return (
      <section style={styleobj} id="profile" >
        <h2 classname="colorheader">{this.state.color}</h2> 
        <input id="colorinput" placeholder="enter hex code here" onchange={this.changecolor.bind(this)}/>
      </section>
    );
  }

https://codepen.io/anon/pen/qdeodv?editors=0010

there's even better ways to refactor this, but this is just the basic resolution.


Related Query

More Query from same tag