I have two sides of project,
1. Collect data from one page with puppeteer
2. React page that sorts and displays the data
My puppeteer code,
const puppeteer = require('puppeteer');
const fileSystem = require('fs/promises');
let data = [{
question: "question text"
}];
async function start() {
/**
* page opening
*/
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.jotform.com/answers/');
/**
* reading data
*/
const questionTextArr = await page.evaluate(() => {
//Array.from(document.getElementsByClassName("dc-f-question"));
let question = document.getElementsByClassName("dc-f-question-name");
const questionList = [...question];
return questionList.map(h => h.innerText);
});
for (let i = 0; i < questionTextArr.length; i++) {
let object = {
question: questionTextArr[i]
};
insertObject(data, object);
}
await browser.close();
}
start();
function insertObject(arr, obj) {
// append object
arr.push(obj);
}
Normally I run this code with node index.js
Then I create a react app that i run with npm start or yarn start
import React from 'react';
import './App.scss';
import Page from './components/Page';
const App = () => {
const data = [{question: ""}];
return (
<div>
<Page
data={data}
/>
</div>
);
}
How can i collaborate these two code into one? How can i use first code in my react app?