I have a file containing javascript and html similar to below. I am trying to render this within a nextjs app. The code in the file cannot be changed to jsx and the application that will render it is a Next app. I have tried using React Helmet by directly embedding it within the code but nothing gets rendered. Are there any other options?
Script file:
<!DOCTYPE html>
<html>
<head>
<title>JSON to Table</title>
</head>
<body>
<h1>JSON Data</h1>
<table id="dataTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// Sample JSON data
const data = [
{ name: "John Doe", age: 35, city: "New York" },
{ name: "Jane Smith", age: 28, city: "Los Angeles" },
{ name: "Bob Johnson", age: 42, city: "Chicago" },
{ name: "Sarah Lee", age: 31, city: "Miami" }
];
// Get the table body element
const tableBody = document.querySelector('#dataTable tbody');
// Loop through the data and create table rows
data.forEach(item => {
const row = document.createElement('tr');
const nameCell = document.createElement('td');
nameCell.textContent = item.name;
row.appendChild(nameCell);
const ageCell = document.createElement('td');
ageCell.textContent = item.age;
row.appendChild(ageCell);
const cityCell = document.createElement('td');
cityCell.textContent = item.city;
row.appendChild(cityCell);
tableBody.appendChild(row);
});
</script>
</body>
</html>
Nextjs code:
"use client"
import {Helmet} from "react-helmet";
const Page = () => {
return (
<>
<div className="w-screen h-screen flex items-start justify-start overflow-hidden">
<Helmet>
<title>Nested Title</title>
<meta name="description" content="Nested component"/>
<html>
{`<!DOCTYPE html>
<html>
<head>
<title>JSON to Table</title>
</head>
<body>
<h1>JSON Data</h1>
<table id="dataTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// Sample JSON data
const data = [
{ name: "John Doe", age: 35, city: "New York" },
{ name: "Jane Smith", age: 28, city: "Los Angeles" },
{ name: "Bob Johnson", age: 42, city: "Chicago" },
{ name: "Sarah Lee", age: 31, city: "Miami" }
];
// Get the table body element
const tableBody = document.querySelector('#dataTable tbody');
// Loop through the data and create table rows
data.forEach(item => {
const row = document.createElement('tr');
const nameCell = document.createElement('td');
nameCell.textContent = item.name;
row.appendChild(nameCell);
const ageCell = document.createElement('td');
ageCell.textContent = item.age;
row.appendChild(ageCell);
const cityCell = document.createElement('td');
cityCell.textContent = item.city;
row.appendChild(cityCell);
tableBody.appendChild(row);
});
</script>
</body>
</html>`}
</html>
</Helmet>
</div>
</>
);
}
export default Page;