score:1
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.
Source: stackoverflow.com
Related Query
- React - making a style object globally accessible
- Making fetch data globally accessible - react
- React error: Style prop value must be an object react/style-prop-object
- Globally accessible modal component in react
- How to extend some style object in react native
- How do I create a globally accessible variable in React JS
- Modifying React style object seems to corrupt dom styles
- React sees inline style attribute as a string even though I'm passing an object
- I am trying to animate an object with css in react and change the animation (timing) dynamically, how can I set the style after animation end?
- How to globally style dynamic react data (dangerouslySetInnerHTML) with styled-components?
- React - Object accessible throughout component
- What makes object from react state is undefined but accessible in console?
- Can you have a globally accessible function in a React App?
- How to create Material-UI nested style object from array using map in React
- Conditional style formatting using a format rules object in Javascript / React
- How to create an Style Object to bind with react component?
- changing style object at index of array in state in react
- Updating an object with setState in React
- React Hooks useState() with Object
- Recommended way of making React component/div draggable
- React inline style - style prop expects a mapping from style properties to values, not a string
- Updating and merging state object using React useState() hook
- How do I update states `onChange` in an array of object in React Hooks
- How to define css variables in style attribute in React and typescript
- Storing an object in state of a React component?
- Tag Error: React JSX Style Tag Error on Render
- How to test style for a React component attribute with Enzyme
- Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development
- Get object data and target element from onClick event in react js
- What is the default unit of style in React Native?
More Query from same tag
- while compiling my react project am facing the issue with module not found
- How can i use ternary operator to display different elements in different positon Reactjs
- I got error while printing object's value after I update the state in react
- Change Image in <CardMedia>
- cannot use react-spring (Uncaught Invariant Violation: Invalid hook call)
- What is the correct way to load prebuilt SQlite databases with or without PouchDB in a React App
- React not mapping certain objects in an array
- only make a field required when prop passed into component is satisfied
- Mui Autocomplete combined with a popper component is causing a major leak when deployed to Heroku?
- Blank page after running build on the react app and errors on the console
- Getting error 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED'
- remove padding of the textbox which comes from material ui
- Typescript react error: JSX element doesn't have any construct or call signatures
- how to solve moderate severity vulnerabilities in vs for npm install
- Slideshow using React hooks and setInterval
- Adding quantity in my reactjs ecommerce website basket
- Close React Modal
- How to render DOM using props in React?
- How to decrease vetical distance between two checkboxes with label?
- Django & React implementation using Google OAuth2 does not work with csrftoken
- pagination when using Array.splice
- How to create a form with text and file input in react and send form data to server using Nodejs?
- How can I change inline style to css using Material-ui in React?
- How do I resize and svg logo in react gatsby?
- optional controlled / uncontrolled React component with conditional React hooks
- How to draw a bubble map with longitude and latitude using Highcharts in react
- React: How can I remove a specific div element after clicking its associated button?
- React Rails : How to get the results of an API Call
- REACT Multi steps form : Next button doesn't work and first circle already in green
- Testing DOM in Enzyme