import React from 'react'
import './index.css'
export default function index() {
return (
<div className="contenedor" onload="onLoad()" id="myDiv"
style= {{display:'none'}}>
<img className="portada"src="image url" alt=""/>
</div>
)
}
HOLA, este es el codigo que tengo en el index de mi proyecto en gatsby
y esto es lo que quiero convertir a JSX, ayuda porfa!
function onLoad() {
var showDiv;
if(localStorage.getItem ("showDiv") == null) {
showDiv = true;
}
else {
showDiv = localStorage.getItem ("showDiv")
}
if (showDiv) {
document.getElementById ('myDiv') .style.display = 'block';
}
else {
document.getElementById ('myDiv') .remove();
}
}
function onClose() {
document.getElementById ('myDiv') .remove();
localStorage.setItem("showDiv", false);
}
y esto es lo que he traducido hasta ahora en JSX...
import React from 'react'
const onLoad = () => {
var showDiv;
if (localStorage.getItem ("showDiv") == null) {
let showDiv = true;
}
else {
showDiv = localStorage.getItem ("showDiv")
}
if (showDiv) {
document.getElementById ('myDiv').style.display = 'block';
}
else {
document.getElementById ('myDiv').remove();
}
};
const onClose = () =>{
document.getElementById ('myDiv').remove();
localStorage.setItem("showDiv", false);
}
en la terminal me muestran estos warnings/errores
1:8 warning 'React' is defined but never used no-unused-vars
4:7 warning 'onLoad' is assigned a value but never used no-unused-vars
21:11 warning 'onClose' is assigned a value but never used no-unused-vars
✖ 3 problems (0 errors, 3 warnings)
ayuda porfa!
entonces este es mi componente
import React from 'react';
import './index.css'
function COM() {
/* cualquier codigo javascript va aqui??? */
return (
<div className="contenedor">
<img className="portada" src="https://res.cloudinary.com/lenguaestudiocreativo/image/upload/v1626228418/hportada_jgljqd.svg" alt=""/>
</div>
)
}
export default COM
y este es mi index principal
import React from 'react';
import './index.css';
import './COM';
export default function index() {
return (
<Com />
)
};
return
return
para regresar el html que quieres mostrar, dame unos minutos y realizo un ejemplo básico, para ayudarte a entender un poco mejor como puedes pasar tu código a react, puedes revisar un poco la documentación