0

I badly need jQuery Api's, but the thing is I have use that api with React js. I am just confusing my React js Lifecycles. Additional Info I am creating view counter for different div. In my Point of View I badly need jQuery api's to take care the height, ScrollTop.. The following code will output Undefined

var React = require('react');
var ReactDOM = require('react-dom');
var NewsDetail = require('./news-details');
var $ = require('jquery');


module.exports = React.createClass({
    getInitialState:function () {

      return{
          news:[
              {

              {
                  id:"5",
                  data:"I probably am using the wrong I probably am using the wrong terminology here but this is what I'm trying to do. I want to create a map with a value terminology here but this is what I'm trying to do. I want to create a map with a value for each key and a value for each key's object. S"
              },
              {
                  id:"6",
                  data:"I probably am using the wrong I probably am using the wrong terminology here but this is what I'm trying to do. I want to create a map with a value I probably am using the wrong terminology here but this is what I'm trying to do. I want to create a map with a value I probably am using the wrong terminology here but this is what I'm trying to do. I want to create a map with a value terminology here but this is what I'm trying to do. I want to create a map with a value for each key and a value for each key's object. S"
              },
              {
                  id:"7",
                  data:"I probably am using the wrong terminology here but this is what I'm trying to do. I want to create a map with a value I probably am using the wrong terminology here but this is what I'm trying to do. I want to create a map with a value I probably am using the wrong terminology here but this is what I'm trying to do. I want to create a map with a value for each key and a value for each key's object. S"
              },
              {
                  id:"8",
                  data:"I probably am using the wrong I probably am using the wrong terminology here but this is what I'm trying to do. I want to create a map with a value terminology here but this is what I'm trying to do. I want to create a map with a value for each key and a value for each key's object. S"
              },
              {
                  id:"9",
                  data:"I probably am using the wrong I probably am using the wrong terminology here but this is what I'm trying to do. I want to create a map with a value I probably am using the wrong terminology here but this is what I'm trying to do. I want to create a map with a value I probably am using the wrong terminology here but this is what I'm trying to do. I want to create a map with a value terminology here but this is what I'm trying to do. I want to create a map with a value for each key and a value for each key's object. S"
              },

          ],
          top:0,
          height:null
      }
    },
    componentWillMount:function () {

    },
    componentDidUpdate:function () {

        var height = $('#newscontainer').height();
        alert(height)//udefined

    },
    render:function () {

      var newsdata = this.state.news.map(function (newss) {

          return(<NewsDetail key={newss.id} {...newss}/>)
      });
        return(
            <div className="newscontanier" id="newscontanier">{newsdata}</div>
        )



    }

})
8
  • 3
    Why do you need jQuery? If you are just getting the height of the element, you can do that without jQuery. Commented Aug 30, 2016 at 15:27
  • 1
    var height = $('#newscontainer').height(); is selecting the wrong id, according to your DOM. ... id="newscontanier" Commented Aug 30, 2016 at 15:28
  • your id is misspelled in your render function. Commented Aug 30, 2016 at 15:28
  • Ya! I Google a Lot But Nothing's worked for Pls could refer any link ... Commented Aug 30, 2016 at 15:29
  • I agree with @NicholasRobinson ... I don't see why you need jQuery in this situation. Commented Aug 30, 2016 at 15:29

1 Answer 1

1

You have typo newscontanier. Nonetheless you can do this like

<div ref={elem => this.elem = elem} className="newscontanier" id="newscontanier">{newsdata}</div>

and then you can find dom element

this.elem.getDOMNode();
Sign up to request clarification or add additional context in comments.

2 Comments

getDOMNode is deprecated
@ray I didn't know it. anyway you can get DOM node from this.elem

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.