CODEWITHSUNDEEP
javascriptreactjsjsx
lenguaestudiocreativo
lenguaestudiocreativo

Reputation: 1

how to translate this javascript code into JSX React

so I have this javascript code that I want to use in React react, it's working so far, so this is what I got, first of all

THIS IS MY JAVASCRIPT CODE the one that I want to turn into GATSBY react JSX

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);
    }

AND THIS IS WHAT I GOT SO FAR, its working but I don't know how to code the onClose function the one right above from the javascript code

SO THIS IS MY COMPONENT

import React, { useEffect } from 'react';
import '../index.css'



export default function Com() {
  useEffect(() => {
    var showDiv;
  if (localStorage.getItem ("showDiv") == null) {
      showDiv = true;
  }
      else {
          showDiv = localStorage.getItem ("showDiv")
      }
      if (showDiv) {
        document.querySelector ('.contenedor').style.display = 'block';
     }
     else {
      document.querySelector ('.contenedor').remove();
     }
     
     () => {
      document.querySelector ('.contenedor').remove(); /* THIS IS THE ANONYMOUS FUNCTION */
      localStorage.setItem("showDiv", false);
     }
  }, []);
  return (
  <div className="contenedor" style={{display: "none"}}>
  <img className="portada" src="https://res.cloudinary.com/lenguaestudiocreativo/image/upload/v1626228418/hportada_jgljqd.svg" alt=""/>
</div>
 );
}

And so this is my main index:

import React from 'react';
import './index.css';
import Com from './componentes/Comdos';


export default function index() {
  return (
    <Com />
  )
};

I tried to use this anonymous function but it doesn't work, of course, if I remove this anonymous function it works right, but I also need this last part of the code, the onClose function, if the anonymous function doesn't work then how do I code this?

and so this is the error that I'm getting with the anonymous function

ERROR in C:\Users\USUARIO\Downloads\VSCODE\JSXejercicios\landingpage\src\pages\componentes\Comdos.js 22:10 error Expected an assignment or function call and instead saw an expression no-unused-expressions

✖ 1 problem (1 error, 0 warnings)

Upvotes: 0

Views: 254

Answers (1)

Ruzky
Ruzky

Reputation: 177

you can use react useState and useEffect hooks, try this one :

import React, { useState, useEffect } from "react";

export default function App() {
  const [show, setShow] = useState(true);

  useEffect(() => {
    if (localStorage.getItem("showDiv") == null)
      localStorage.setItem("showDiv", show);
  }, []);

  function togglePic() {
    setShow(!show ? true : false);
    localStorage.setItem("showDiv", !show);
  }

  return (
    <>
      <button onClick={togglePic}>Click to toggle the picture</button>
      <div className="contenedor" style={{ display: show ? "block" : "none" }}>
        <img
          className="portada"
          src="https://static.wikia.nocookie.net/spongebob/images/3/3e/SpongeBob_Star_show.jpeg"
          alt=""
        />
      </div>
    </>
  );
}

Reference:

Here are some references you can explore more

ReactJs Documentation - Conditional Rendering
ReactJs Documentation - Handling Events
ReactJs Documentation - Hooks State
ReactJs Documentation - Hooks Effect

Code Example:

try live code using CodeSanbox
Code Sanbox - Demo

Upvotes: 1

Related Questions