JS Rendering within React

Question

I have javascript - webscraper. I added this in my component folder within my ReactJS app. I am trying to Render this into the web page.

The JSX components I used the within other compoents to render it.

How do I get the output from this webscraper javascript into the webpage. I know the console.log() statement must be changed, but I don't know how to proceed.

---

var Nightmare = require('nightmare');
var nightmare = Nightmare({ show: false})

nightmare
  .goto('http://javascriptissexy.com/16-javascript-concepts-you-must-know-well/')

  //.wait('#entry-content')
  .evaluate(function () {
    var ht = document.querySelector('li');
    //return ht[0];
    //return (ht.split(/\r\n|\r|\n/).length);
    //check = document.querySelectorAll('#bodyblock > ul >li').length;
    //return check;
    //var ht1 = document.querySelectorAll('#bodyblock > ul > li ').innerText[5];
    //return ht1;
    return ht;


  })
  .end()
  .then(function (result) {
    console.log(result)
  })
  .catch(function (error) {
    console.log('Search failed:', error);
  });

Answer 1

Your above function just gets data, then if you want to display the data on react page, you will have to use this.setState() and the page will be re-rendered.

I assume that the above function works well, then you can use something like this: (according to React Component's Life Cycle):

import React from 'react';
import Nightmare from 'nightmare';

export default class MyClass extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            resultFromScraping: '',
        }
    }

    componentWillMount() {
        var nightmare = Nightmare({ show: false});

        nightmare
            .goto('http://javascriptissexy.com/16-javascript-concepts-you-must-know-well/')

            //.wait('#entry-content')
            .evaluate(function () {
                var ht = document.querySelector('li');
                //return ht[0];
                //return (ht.split(/\r\n|\r|\n/).length);
                //check = document.querySelectorAll('#bodyblock > ul >li').length;
                //return check;
                //var ht1 = document.querySelectorAll('#bodyblock > ul > li ').innerText[5];
                //return ht1;
                return ht;


            })
            .end()
            .then( (result) => { //here we use lexical binding, to bind this callback function to the current react component
                console.log(result);
                this.setState({
                    resultFromScraping: JSON.stringify(result), //this is just an example, you can do whatever you want with the result here
                });

            })
            .catch(function (error) {
                console.log('Search failed:', error);
            }); 
    }

    render() {
        return (
            <div>{this.state.resultFromScraping}</div>
        );
    }
}

If you have any error, please post here then we can find a solution, thanks ^^ !