Question 173722 in Javascript Question posted in
A very good W3school tutorial can be found here.

How can I convert JavaScript code for use in a React app?

codepen

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

let interval = null;

document.querySelector("h1").onmouseover = event => {  
  let iteration = 0;

  clearInterval(interval);

  interval = setInterval(() => {
    event.target.innerText = event.target.innerText
      .split("")
      .map((letter, index) => {
        if(index < iteration) {
          return event.target.dataset.value[index];
        }
  
        return letters[Math.floor(Math.random() * 26)]
      })
      .join("");

    if(iteration >= event.target.dataset.value.length){ 
      clearInterval(interval);
    }

    iteration += 1 / 3;
  }, 30);
}

This is js codepen i want to use this in my react app, How can i change this to react based code?

Copy pasted the code into JSX but it didnt work
Tried getting classname and added a classname in div but still it didnt work

Tags:

2

Answers


  1. 0

    This could maybe help you:

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

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

const App = () => {
  const [text, setText] = useState('');

  useEffect(() => {
    let interval = null;

    const handleMouseOver = () => {
      let iteration = 0;

      clearInterval(interval);

      interval = setInterval(() => {
        setText(prevText => {
          return prevText
            .split("")
            .map((letter, index) => {
              if (index < iteration) {
                return prevText[index];
              }

              return letters[Math.floor(Math.random() * 26)];
            })
            .join("");
        });

        if (iteration >= text.length) {
          clearInterval(interval);
        }

        iteration += 1 / 3;
      }, 30);
    };

    const h1Element = document.querySelector("h1");
    h1Element.addEventListener("mouseover", handleMouseOver);

    return () => {
      h1Element.removeEventListener("mouseover", handleMouseOver);
      clearInterval(interval);
    };
  }, [text]);

  return (
    <div>
      <h1>{text}</h1>
    </div>
  );
};

export default App;
    Login or Signup to reply.
  2. 0

    You can also use an onMouseOver event on H1 tag like this

    <h1 onMouseOver={handleMouseOver}>Hover over me</h1>

    Then, add a function handleMouseOver

    const handleMouseOver = (event) => {
  let iteration = 0;

  clearInterval(intervalId);

  const newIntervalId = setInterval(() => {
    event.target.innerText = event.target.innerText
      .split("")
      .map((letter, index) => {
        if (index < iteration) {
          return event.target.dataset.value[index];
        }

        return letters[Math.floor(Math.random() * 26)];
      })
      .join("");

    if (iteration >= event.target.dataset.value.length) {
      clearInterval(newIntervalId);
    }

    iteration += 1 / 3;
  }, 30);

  setIntervalId(newIntervalId);
};

    However this will only work for single H1 tag as the function is only added to the particular jsx line, you can however re-use this function

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search