Question 74256 in Reactjs Question posted in
The new location for the React Documentation can be found here.

how to add javascript on Jsx – Reactjs

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
Tags:

4

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
  4. 0

    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.

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

Back To Top
Search