how to add javascript on Jsx

Question

i'm learning Javascript and React and i got a problem. i want to play a javascript function on a jsx files but i don't know where to put it. i explain: I want to make a mouseover effect, when "tech-title" is hover, i want to show "tech-text". In the CSS, visibility is "hidden" for "tech-text" I want to know what i'm doing wrong ... thanks a lot ;)

const Resume = () => {
  let techTitle = document.querySelectorAll('.tech-title')
  let techText = document.querySelectorAll('.tech-text')

  function cardDisplay() {
    techTitle.addEventListener('mouseover', () => {
      techText.style.visibility = 'visible'
    })
  }

  return (
    <div className="app-container">
      <Profile />
      <div className="right-container">
        <Navigation />
        <div className="display">
          <h2 className="exp-title">A propos de moi</h2>
          <p className="about-me">
            Curieux de nature, je suis à la recherche d'un nouvel environnement de travail pour une première expérience
            en tant que Développeur, je suis motivé et prêt à apprendre de nouvelles compétences.
          </p>
          <h3 className="skills">Skills</h3>
          <div class="skill-content">
            <div className="skill-card">
              <i className="fa-solid fa-puzzle-piece"></i>
              <h4 className="skill-title">Réflexion</h4>
              <p className="skill-text">
                Je trouve très stimulant le fait d'analyser un problème afin d'en trouver la solution
              </p>
            </div>
            <div class="skill-card">
              <i className="fa-solid fa-people-group"></i>
              <h4 className="skill-title">Travail en équipe</h4>
              <p className="skill-text">
                Je suis à l'aise pour travailler en équipe ainsi que pour m'exprimer en public
              </p>
            </div>
            <div className="skill-card">
              <i className="fa-solid fa-user-ninja"></i>
              <h4 className="skill-title">Capacité d'apatation</h4>
              <p className="skill-text">
                Je suis capable de m'adapter à tout type de situation ainsi que de gérer mon stress
              </p>
            </div>
            <div className="skill-card">
              <i className="fa-solid fa-lightbulb"></i>
              <h4 className="skill-title">Curiosité</h4>
              <p className="skill-text">
                Curieux de nature, j'adore apprendre de nouvelles connaissances et compétences
              </p>
            </div>
          </div>
          <h3 className="skills">Tech</h3>
          <div className="tech-container">
            <div className="tech-card">
              <div className="img-tech"></div>
              <h4 className="tech-title">Html, CSS</h4>
              <p className="tech-text">bla</p>
            </div>
            <div className="tech-card">
              <div className="img-tech"></div>
              <h4 className="tech-title">SASS</h4>
              <p className="tech-text"></p>
            </div>
            <div className="tech-card">
              <div className="img-tech"></div>
              <h4 className="tech-title">Javascript</h4>
              <p className="tech-text">bla</p>
            </div>
            <div className="tech-card">
              <div className="img-tech"></div>
              <h4 className="tech-title">React Js</h4>
              <p className="tech-text">bla</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
export default Resume

derFrosty · Accepted Answer · 2023-02-16 10:09:22Z

Depends on how you want to call your function inside yout JSX.

If you want to call your function every time your component renders you can just call it inside curly braces anywhere inside your JSX.

function myFunction() {
  console.log('Hi, I rendered');
}

return (
  <div>
    {myFunction()}
  </div>
)

If you want to call your function when an event happens, like a click event for example, you need to pass the function as a callback like so

function myOnClickFunction() {
  console.log('I was clicked');
}

return (
  <div>
    <button onClick={myOnClickFunction}>Click me!</button>
  </div>
)

Notice that I don't use the () when passing my function as a callback onClick={myOnClickFunction}, that is because I don't to run it now, I want to run it when the user clicks on it.

If you need to pass params inside your function you can write your callback as an arrow function and pass any params inside to it.

function myOnClickFunctionWithParams(name) {
  console.log(`Hey ${name}, I was clicked`);
}

return (
  <div>
    <button onClick={() => myOnClickFunctionWithParams('John')}>Click me!</button>
  </div>
)

In your case I think you will want to use onMouseEnter and onMouseLeave events on your div.

There are many default events you can use similar to onClick, you can fallback to this documentation anytime you have questions

Versaroumane · Accepted Answer · 2023-02-16 09:56:46Z

1

React uses what's called a virtual-dom wich is built on top of the actual dom, and so they provide their own library of events methods, for your specific case, i would suggest you those react event methods:

onMouseEnter

and

onMouseLeave

learn more on how to handle mouse hover

answered Feb 16, 2023 at 9:56

Versaroumane

213 bronze badges

Comments

vignesh · Accepted Answer · 2023-02-16 09:46:13Z

0

You can use curly braces in your JSX to open a window to JavaScript, please refer the doc

answered Feb 16, 2023 at 9:46

vignesh

1,07412 silver badges12 bronze badges

Comments

John Detlefs · Accepted Answer · 2023-02-16 22:36:43Z

First, a quick solution to the mouseover problem.

const Resume = () => {

   const [hovered, setHovered] = useState(false);

   return (
      <div 
          onMouseOver={() => setHovered(true)} 
          onMouseLeave={() => setHovered(false)}
      >
           Text I want to show on mouse over
      </div>
   )
}

You'll see there's a lot less code than you're using, and no event listeners.. you're using what I like to call "psuedo React" - in many ways you're fighting against all of the reasons why React exists in first place!

There's a good video about this on YT: Stop Writing Fake React Code

My advice is to do some tutorials/courses on React and learn how to do the basics properly, it'll be time well spent!

On the "where to put my JS functions?" issue, in general, if the function depends upon any props or state from the component, then add it inside the component as a regular function.

If there are no dependents then the function is better off outside the component.. it's reusable, much easier to write unit tests for, and can't trigger any unexpected re-renders.

Collectives™ on Stack Overflow

how to add javascript on Jsx

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related