1
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 />
  )
};
20
  • Bienvenido a Stack Overflow en español. Por favor no utilices imágenes para mostrar tu código, puedes editar tu pregunta y agrega el código en texto, también puedes revisar Cómo preguntar.
    – Richard
    Commented el 12 ago. 2021 a las 0:30
  • También puedes especificar un poco mas que problema presentas, el único problema que puedo ver es que no regresar un componente como se espera en el return
    – Richard
    Commented el 12 ago. 2021 a las 0:38
  • hola Richard, pues ya estuve tratando de llegar a un codigo parecido, pero sigue sin funcionar Commented el 12 ago. 2021 a las 0:42
  • @Richard, no entiendo eso que dices de return, quiero llegar a algo parecido del codigo de javascript en JSX, pero eso no tiene return Commented el 12 ago. 2021 a las 0:53
  • Todo componente en react tiene un 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
    – Richard
    Commented el 12 ago. 2021 a las 1:05

1 respuesta 1

0

Bueno por lo que entiendo onLoad es el componente que quieres renderizar, y suponiendo que lo llamaras en tu index, el cual debe funcionar sin problemas.

También suponiendo que entiendo bien tu código, basado en lo que tienes en localStorage.getItem ("showDiv") mostraras un div basado en esa condición.

Se me ocurre que tu código puede quedar de la siguiente manera.

import React from 'react';

const OnLoad = () => {
    let textoDiv = 'texto defeault';
    let showDiv = false;
    let testComponent = (<div>component default</div>);

    if (localStorage.getItem("showDiv") == null) {
        showDiv = true;
        textoDiv = 'miDiv';
    }
    else {
        showDiv = localStorage.getItem("showDiv");
        textoDiv ='miDiv con else';
    }
    if (showDiv) {
        testComponent = <div>componente cumpliendo showDiv</div>
    }
    else {
        testComponent = <div>componente NO cumpliendo showDiv</div>
    }
    return (
        <>
            <div>
                {textoDiv}
                {testComponent}
            </div>
        </>
    );
}
export default OnLoad;

Cambie onLoad por OnLoad ya que es costumbre definir los componentes con la primera mayúscula y distinguirlos así de código html.

Elimine los document debido a que aquí no se hace referencia a código html de manera tradicional

En cuanto a usar tu scroll puedes revisar un poco la documentación de Gatsby sobre Scroll Restoration no se si sea lo que quieres pero puede ayudarte un poco.


Ejemplo básico para usar un componente o componentes

Al crear un proyecto CRA(Create React App), solemos tener un index.js o index.jsx con la siguiente estructura

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Ahora creamos 2 componentes básicos para utilizarlos en el index.

Componente 1

import React from 'react';

const MiComponente1 = () => {
    return (
        <>
            <h1>Componente 1</h1>
        </>
    );
}
export default MiComponente1;

Componente 2

import React from 'react';

const MiComponente2 = () => {
    return (
        <>
            <h5>Mi Componente 2</h5>
        </>
    );
}
export default MiComponente2;

Para visualizar estos 2 componentes los importamos en el index de la siguiente manera.

import MiComponente1 from 'pages/testPromise';
import MiComponente2 from 'pages/testComponente';

Al usarlos, queda nuestro index de la siguiente manera.

import React from 'react';
import ReactDOM from 'react-dom';

import MiComponente1 from 'pages/testPromise';
import MiComponente2 from 'pages/testComponente';

ReactDOM.render(
  <React.StrictMode>
    <MiComponente1 />
    <MiComponente2 />
  </React.StrictMode>,
  document.getElementById('root')
);

Todo esto aplicado a la creación de un proyecto básico de React, Tu proyecto esta hecho con gatsby por lo tanto re comiendo que revises la documentación al respecto para uso con react

9
  • @Richard, uy bien gracias, espera lo analizo y te comento despues, mañana hehe, dale gracias....este pendiente eh!. Commented el 12 ago. 2021 a las 3:40
  • mejor la otra semana...que voy a ver unos tutoriales y eso Commented el 12 ago. 2021 a las 22:21
  • hola richard, oye necesito ayuda la verdad no entiendo JSX, me gustaria que me ayudara, entonces primero, para entender JSX y el codigo que me paso arriba pense en simplemente hacer un componente y pasar este al index principal, como paso a paso no?....entonces hise el componente le agregue el javascript con el return y eso, respetando la estructura del JSX, pero no me funciono me boto errores, entonces intente hacer un simple componente ysin nada de javascript y pasarlo al index principal Commented el 17 ago. 2021 a las 0:38
  • entonces mire a continuacion Commented el 17 ago. 2021 a las 0:58
  • @lenguaestudiocreativo Edite mi respuesta para dar un ejemplo mas claro del como funciona un poco los componentes con react, espero te sirva y recomiendo que revises la documentación de Gatsby
    – Richard
    Commented el 17 ago. 2021 a las 3:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.