wants to change the color of div in react

Question

hello guys i want to change the color of my div when mhen i enter any any value in input..but i dont get how to set background color and how to take defult color in state please help me

constructor(props)
{
super(props)
this.state={
  name:'',
  color:false,
  backgroundcolor:''

}
this.onChange=this.onChange.bind(this);

}
onChange(event)
{
event.preventDefault();
this.setState({[event.target.name]:event.target.value});
console.log(this.state);
this.props.come(this.state.name);
console.log('hello this is from name box',this.state.name);
this.setState({color:true});
console.log(this.state.color);
}

render() {
return (

   <div class="home">
   <h3>This is Function#1</h3>
   <p>Have You noticed The Changing ,How fast react works</p>
   <div>
       <label>Your Name:</label>
       <input type="text" name="name"onChange={this.onChange} placeholder="Enter your Name"/>
   </div>
   <br>
  </br>
   <div>
     {this.props.sendname.newname}
  </div>

  <div>
   /*this is my div where i want color*/

    </div>
  </div>
)

Answer 1

You can set your div's style with an object, which in your case would include your background color. Remember that react takes the CSS properties, but just in camelCase instead of the hyphen-case.

So in the case of the background-color property, you need to call it backgroundColor.

So your div will look something like this:

<div style={{backgroundColor: this.state.backgroundcolor}}>
</div>

Keep in mind that you can add as many style properties as you wish in your react component. They all just need to be camel case. Say you wanted to also add the font size property to this div, you could do:

<div style={{backgroundColor: this.state.backgroundcolor, fontSize: someSize}}>

Once you have various properties that you may want to add in a tag, you can just use an object:

const styles = {
   backgroundColor: backgroundColor,
   fontSize: someSize,
   color: someColor,
   padding: paddings
}
...
<div style={styles}>

Now, for the second part of your question, you just need to change your background color state whenever there is anything in your input. This check could be made in a state, or in your onChange function.

So something like this:

onChange (value) {
  if(value) {
    this.setState({backgroundcolor: '[WHATEVER COLOR YOU WANT IT TO CHANGE TO]'})
  } else {
    this.setState({backgroundcolor: ''})
  }
}

Here is a simple version of the app for you:

class App extends React.Component{
  constructor (props) {
    super(props)
    this.state = {
      inputValue: '',
      backgroundcolor: ''
    }
  }
  onChange(inputEntry) {
    if (inputEntry) {
      this.setState({inputValue: inputEntry, backgroundcolor: '#FF0000'}) // here I want to change the color to red
    } else {
      this.setState({inputValue: inputEntry, backgroundcolor: ''}) // leave empty for default
    }
  }
  
  render(){
    const { backgroundcolor } = this.state

    return (
     <div>
        <input 
          value={this.state.inputValue}
          onChange={(evt) => this.onChange(evt.target.value)}
         />
         <div style={{backgroundColor: backgroundcolor}}>
          <h1>background color to change here!</h1>
         </div>
     </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

this.setState({ backgroundcolor: "#f0f' });    
<div style={{ backgroundColor: "#f0f' }};

or

let divStyle = { backgroundColor: this.state.backgroundColor };
<div style = {divStyle}>Hello world</div>