content in <script> tag to ReactJS component

Here is my code in HTML, in this I need to take out the script part and modify it to ReactJS and use as script source in html again. Since, I started it as html itself and new to React.

<script>
function idbOK()
return "indexedDB" in window; //check whether indexeddb is supported in the browser

var db;
var key = 100;
$(document).ready(function()
if(!idbOK()) return;
var DBopenRequest = indexedDB.open("ora_idb3",1);
DBopenRequest.onupgradeneeded = function(e)
var thisDB = e.target.result;
console.log("running onupgradeneeded");

if(!thisDB.objectStoreNames.contains("notes"))
var notesOS = thisDB.createObjectStore("notes", autoIncrement: true)
console.log("makng a new object store notes");
notesOS.createIndex("title","title",unique: false);



DBopenRequest.onsuccess = function(e)
console.log("running onsuccess");
db = e.target.result;
getNote();
$('#note').on('input propertychange change', function()
addNote();
)



DBopenRequest.onerror = function(e)
console.log("onerror!");
console.dir(e);


);
</script>


I want to change the code to ReactJS. Am new to ReactJS and found this complex to move.

1 Answer
1

You can do so by the following approach:

const dbSetupScript = `function idbOK()
return "indexedDB" in window; //check whether indexeddb is supported in the browser

var db;
var key = 100;
$(document).ready(function()
if(!idbOK()) return;
var DBopenRequest = indexedDB.open("ora_idb3",1);
DBopenRequest.onupgradeneeded = function(e)
var thisDB = e.target.result;
console.log("running onupgradeneeded");

if(!thisDB.objectStoreNames.contains("notes"))
var notesOS = thisDB.createObjectStore("notes", autoIncrement: true)
console.log("makng a new object store notes");
notesOS.createIndex("title","title",unique: false);



DBopenRequest.onsuccess = function(e)
console.log("running onsuccess");
db = e.target.result;
getNote();
$('#note').on('input propertychange change', function()
addNote();
)


DBopenRequest.onerror = function(e)
console.log("onerror!");
console.dir(e);

);`;


Note: If you want some variable value then, can use $variable_name syntax inside dbSetupScript string.

$variable_name

dbSetupScript

Then from React component's render method you can do the following

<script dangerouslySetInnerHTML=__html: dbSetupScript />

<script dangerouslySetInnerHTML=__html: dbSetupScript />

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.