I'm trying to change the text of a <p> to David and Larry accordingly when each button (that has an image inside) has hovered. I have experimented with numerous things and found a way to change the CSS of the button with a function. But I was unable to find anything to change text since <p> is in a different class. Any suggestions to address this problem?

For your information, I have added a CSS color changing function I used earlier to the below code sample.

here's my code.

import React from 'react'; 
import "./Tri.css";

function Tri() {
    function davidon(e) {
        e.target.style.background = 'red';
    }

    function davidoff(e) {
        e.target.style.background = 'green';
    }
    function larryon(e) {
        e.target.style.background = 'red';
    }

    function larryoff(e) {
        e.target.style.background = 'green';
    }

    return (  
        <div>
            <div>
                <div>

                <button onMouseOver={davidon} onMouseLeave={davidoff}>
                    <img src={require(`./images/david.png`)} className="david"/>
                </button>

                <button onMouseOver={larryon} onMouseLeave={larryoff}>
                    <img src={require(`./images/larry.png`)} className="larry"/>
                </button>
                </div>

                <div className="plex">
                    <p>Larry Or David?</p>
                </div>

            </div>

        </div>
    );

}

export default Tri;

Thanks in advance for you replies.

I'm trying to change the text of a <p> to David and Larry accordingly when each button (that has an image inside) has hovered. I have experimented with numerous things and found a way to change the CSS of the button with a function. But I was unable to find anything to change text since <p> is in a different class. Any suggestions to address this problem?

For your information, I have added a CSS color changing function I used earlier to the below code sample.

here's my code.

import React from 'react'; 
import "./Tri.css";

function Tri() {
    function davidon(e) {
        e.target.style.background = 'red';
    }

    function davidoff(e) {
        e.target.style.background = 'green';
    }
    function larryon(e) {
        e.target.style.background = 'red';
    }

    function larryoff(e) {
        e.target.style.background = 'green';
    }

    return (  
        <div>
            <div>
                <div>

                <button onMouseOver={davidon} onMouseLeave={davidoff}>
                    <img src={require(`./images/david.png`)} className="david"/>
                </button>

                <button onMouseOver={larryon} onMouseLeave={larryoff}>
                    <img src={require(`./images/larry.png`)} className="larry"/>
                </button>
                </div>

                <div className="plex">
                    <p>Larry Or David?</p>
                </div>

            </div>

        </div>
    );

}

export default Tri;

Thanks in advance for you replies.

• javascript
• css
• reactjs

• have you tried using useState and changing the state onMouseOver? Also, don't manipulate the dom manually i.e directly updating e.target.style.background. – fayeed Commented Mar 19, 2020 at 13:39
• you should refer to this to learn more about state. – fayeed Commented Mar 19, 2020 at 13:41

3 Answers 3

You need to think more in "React", and use ponent state and props. The offical documentation is a good place to start.

Here I've got two ponents.

1) Tri: which has it's own state, and builds the HTML using Button ponents

2) Button: since you need each button to change color depending on the mouse action it's best to separate that functionality out into a new ponent so that each instance can have its own state.

(I've intentionally left out the images in this example, but you could pass in a src prop to the button and have that handle the images too if you wanted.)

const { useState } = React;

// `Button` accepts a props object
// Here I've destructured out the button name,
// and the handleHover function
function Button({ name, handleHover }) {

  // We initialise the state with "green"
  const [ color, setColor ] = useState('green');

  function handleColor() {

    // We set the new color based on the current color
    setColor(color => color === 'red' ? 'green' : 'red');

    // And then call the `handleHover` function, passing in `name`
    handleHover(name);
  }

  return (
    <button
      className={color}
      onMouseOver={handleColor}
      onMouseLeave={handleColor}
    >
      {name}
    </button>
  );
}

function Tri() {
  
  // In `Tri` we set its own state for the name
  // initialised to an empty string
  const [ name, setName ] = useState('');
  
  // A handler that changes the name
  // This is the function we pass to each button
  function handleHover(name) {
    setName(name);
  }
  
  // Set up two buttons using our Button ponent
  // assigning a name to each, and passing in our handler
  // Whenever the name (state) is changed the name in the
  // paragraph also changes
  return (
    <div>
      <div>
        <Button name="Larry" handleHover={handleHover} />
        <Button name="David" handleHover={handleHover} />
      </div>
      <p>{name}</p>
    </div>
  );
}

ReactDOM.render(
  <Tri />,
  document.getElementById('react')
);

.red { background-color: red; }
.green { background-color: green; }

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Try using states. And don't change DOM-nodes dynamically in event handlers. Always use React functionality:

React uses a declarative form of programming (The Virtual DOM specifically). You define variables and set them and React updates the DOM if those change.

useState gives you the opportunity to declare an editable (through a setter function) variable. See Docs on State and Props.

import React from 'react';
import "./Tri.css";

function Tri(props) {
    // props as immutable arguments (if needed)


    // useState keeps an internal state in the ponent
    let initialTxt = 'Larry Or David?';
    const [text, setText] = React.useState(initialTxt);


    return (
        <div>
            <div>
                <div>
                    <button
                        className="david-btn"
                        onMouseOver={() => setText('David')}
                        onMouseLeave={() => setText(initialTxt)}>
                        <img src={require(`./images/david.png`)} className="david"/>
                    </button>

                    <button
                        className="larry-btn"
                        onMouseOver={() => setText('Larry')}
                        onMouseLeave={() => setText(initialTxt)}>>
                        <img src={require(`./images/larry.png`)} className="larry"/>
                    </button>
                </div>

                <div className="plex">
                    <p>{text}</p>
                </div>

            </div>

        </div>
    );

}

Also, extend ./Tri.css with the following code. You could use a style-variable but that would make your code more bloated and unreadable if you have access to CSS.

.david-btn,
.larry-btn {
    background-color: green;
}

.david-btn:hover,
.larry-btn:hover {
    background-color: red;
}

You are looking for Refs. You can read more about them in documentation.
I've created a simple example (based on your code).

Step by step what I did:

1. import useRef hook which is used to create reference.

import React, { useRef } from "react";

2. created reference:

const pTagRef = useRef();

3. passed reference to your p tag

<div ref={pTagRef} className="plex">
    <p>Larry Or David?</p>
</div>

4. created function which can change the content of this reference where pTagRef.current is DOM element.

function setName(name) {
    if (pTagRef.current) {
      pTagRef.current.innerText = name;
    }
}

5. called the function whenever name changed

setName("larry");

You should definitely use state for this but I hope this one helps you to get started.