0

it's weird when I try to change the style of this section by changing state when user mouseOver button. The content of h1 tag is changed but style of the section isn't. Could someone help me on that?

    export class Jumbotron extends Component {

    constructor (props) {
    super(props)
    this.state = {
      style: {
        backgroundImage: 'none'
      }
    }

    this.handleSubjectMouseOver = this.handleSubjectMouseOver.bind(this)
  }

  handleSubjectMouseOver (bg) {
    console.log(bg)
    this.setState({
      style: {
        backgroundImage: bg
      }
    })
  }

  render () {
    return <section className="jumbotron container" style=
    {this.state.style}>
      <h1>{this.state.style}</h1>
      <div className="jumbotron-content">
        <h2 style={{marginBottom: 3, marginTop: 40}}>Learning is fun with 
        LIVE</h2>
        <div style={{marginLeft: 10}}>Body ........</div>
        <div style={{marginBottom: 20, marginTop: 80}}
             className="subjects-title">TOP CLASSES, TUTORIAL & TIPS TO EXCEL IN:
        </div>
        <div className="subjects" style={{backgroundImage: this.state.background}}>
          <RaisedButton label="MATH" secondary onMouseMove={() => { this.handleSubjectMouseOver(mathBg) }} />
          <RaisedButton label="PHYSICS" secondary onMouseMove={() => { this.handleSubjectMouseOver(physicBg) }} />
          <RaisedButton label="CHEMISTRY" secondary onMouseMove={() => { this.handleSubjectMouseOver(chemistryBg) }} />
          <RaisedButton label="BIOLOGY" secondary onMouseMove={() => { this.handleSubjectMouseOver(biologyBg) }} />
          <RaisedButton label="COMP SCIENCE" secondary
                        onMouseMove={() => { this.handleSubjectMouseOver(computerBg) }} />
        </div>
      </div>
    </section>
  }
Luong Dinh
  • 569
  • 4
  • 17
  • 2
    I had this issue yesterday, Instead of changing the CSS directly. Have your CSS have two different classes, and on event changes, toggle these classes. Also, make sure you've conditionals that check for state changes, are you doing that in your code? – kotAPI Jul 28 '17 at 04:02
  • in my case, I don't have any conditional rendering. because the number of the background image is dynamic. I can't use classes here. :( – Luong Dinh Jul 28 '17 at 04:06
  • 1
    Could you post a little bit more detailed code so I can understand where the problem is? – kotAPI Jul 28 '17 at 04:11
  • list of RaiseButton is dynamic from db. – Luong Dinh Jul 28 '17 at 04:15
  • 2
    style={{'backgroundImage': 'url('+this.state.background+')'}} use this one if background contains image path – Santosh Shinde Jul 28 '17 at 04:26
  • Ok I think I know what's wrong I'll post it as an answer. – kotAPI Jul 28 '17 at 04:26
  • 1
    Please let me know it will help you or not – Santosh Shinde Jul 28 '17 at 04:27
  • `this.handleSubjectMouseOver(mathBg)` : `mathBg` is undefined – btzr Jul 28 '17 at 04:28
  • You are passing undefined vars ( unless that was just an example ) ^^ – btzr Jul 28 '17 at 04:29
  • @SantoshShinde your solution worked. Could you post as an answer and explain more the detail about this. Thanks. – Luong Dinh Jul 28 '17 at 04:31
  • Possible duplicate of [Setting a backgroundImage With React Inline Styles](https://stackoverflow.com/questions/39195687/setting-a-backgroundimage-with-react-inline-styles) – btzr Jul 28 '17 at 04:31

2 Answers2

1

Use the following line in place of setting background image 

style={{'backgroundImage': 'url('+this.state.background+')'}}

To read more in details about this to here & here.

And also check the css-loader issues with webpack to here.

Hopes this will help you!

Santosh Shinde
  • 6,045
  • 7
  • 44
  • 68
0

There's nothing typically wrong with the code, it's just that your event isn't firing because of one simple reason. 

<RaisedButton onMouseMove={() => { this.handleSubjectMouseOver(mathBg) }} />

Here, RaisedButton isn't a native DOM element, it totally depends on how you defined it. Here, the mouseOver event that you supplied is simply a property, and doesn't count as an event. To fix this, you need to pass an event to a native DOM element, wrap your component around a div and pass the event to it, like this. 

<div className="raisedButtonClass" onMouseMove={someFunction}>
     <RaisedButton ......./>
</div>

I hope this fixes your problem :)

kotAPI
  • 387
  • 1
  • 7
  • 20