title: React writing inline styling where it shouldn't
body: <p>I have this following react script :</p>
  
  <pre><code>var Bilder = React.createClass({
    getInitialState: function() {
      return {
        data:[
                ['1', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild1.jpg'],
                ['2', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild2.jpg'],
                ['3', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild3.jpg'],
                ['4', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild4.jpg'],
                ['5', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild5.jpg']
            ],
        currentPic:[],
        display:'showBild clearfix dn',
        displayBg:'darkBg dn'
      };
    },
    showBild: function(e, data){
      console.log("PARENT COMPONENT SHOW BILD",e);
      this.setState({
        currentPic: e,
        display: 'showBild clearfix db',
        displayBg: 'darkBg db'
      });
      $('.showBild').attr('style', ''); // Hack
      $('.darkBg').attr('style', ''); // Hack
    },
    hide: function(){
      console.log("PARENT COMPONENT HIDE BILD");
      this.setState({
        display: 'showBild clearfix dn',
        displayBg: 'darkBg dn'
      });
    },
    render: function() {
      return (
        &lt;div&gt;
          &lt;SingleBild data={this.state.data} chosenBild={this.showBild} /&gt;
          &lt;BildDetail hide={this.hide} data={this.state.currentPic} display={this.state.display} displayBg={this.state.displayBg} /&gt;
        &lt;/div&gt;
      );
    }
  });
  
  var SingleBild = React.createClass({
    getInitialState: function() {
      return {
        bild:[]
      };
    },
    showBild: function(data, e){
      e.preventDefault();
      console.log("clicked a");
      this.props.chosenBild(data);
    },
    render: function() {
      var scopeThis = this;
      var displayBild = function(bild){
           return &lt;li&gt;&lt;img src={bild[1]} alt="" /&gt;&lt;span&gt;{bild[2]}&lt;/span&gt;&lt;a onClick={scopeThis.showBild.bind(null, bild)} href="#"&gt;&lt;i className="fa fa-eye"&gt;&lt;/i&gt;&lt;/a&gt;&lt;a href="#"&gt;&lt;i className="fa fa-trash-o"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      };
      return (
        &lt;ul className="dashboardUl bilder clearfix"&gt;
          &lt;h2&gt;Gemeldete Bilder:&lt;/h2&gt;
          {this.props.data.map(displayBild)}
        &lt;/ul&gt;
      );
    }
  
  });
  var BildDetail  = React.createClass({
    hide: function(){
      this.props.hide();
    },
    render: function() {
      var scopeThis = this;
      return (
        &lt;div&gt;
          &lt;div className={this.props.display}&gt;
            &lt;img src={this.props.data[1]} alt="" /&gt;
            &lt;span&gt;{this.props.data[2]}&lt;/span&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i className="fa fa-trash-o"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i className="fa fa-ban"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div onClick={this.hide} className={this.props.displayBg}&gt;&lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  
  React.render(&lt;Bilder /&gt;, document.getElementById('bilder'));
  </code></pre>
  
  <p>The main functionality is as following:</p>
  
  <p>The parentcomponent <code>&lt;Bilder /&gt;</code> has 2 child component <code>&lt;SingleBild /&gt;</code> and <code>&lt;BildDetail /&gt;</code> .  has 4 initial states, <code>data:</code> which is an array and contains dummy entries with some img path, <code>currentPic:</code> which gets filled when some action happens, <code>display:</code> + <code>displayBg</code> which contains some classes to style an element and hide it</p>
  
  <p>In the <code>&lt;SingleBild /&gt;</code> component the state array of the parent component has been passed as a prop. Now it gets mapped and rendered out to display seperate elements. Those elements have content which consist of an img and 2 icons. One icon is clickable.</p>
  
  <p>The clickable icon calls a function which passes some content to the parent component in which another function gets called to alter the state and set state <code>currentPic, display and displayBg</code>.</p>
  
  <p>currentPic now contains an array with the img src and everything needed. The other two states got changed with one class from "dn" to "db" (=from display none class to display block class)</p>
  
  <p>Now a div gets shown above the content containg an img and two more icons. behind the div there is a 100% width and height black background which has an onClick function.
  The onClick function is called hide, it changes the state back from "db" to "dn" (=from display block class to display none class)</p>
  
  <p>Somehow react doesnt only change the class but also creates an inline style which looks liek that style="display:none" </p>
  
  <p>So when I click the icon to show the popup again the classes get changed fine but the inline style attribute is still there and overwritting all class styles...</p>