How to change text in a <p> tag when hovering a button in ReactJs?

Question

I'm trying to change the text of a <p> to david and larry accordingly when each button is 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 any thing to change text since <p> is in a different class. Any suggestions to address this problem?

For you information, I have added the css 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.

Answer 1

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

Answer 2

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.

Answer 3

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

Here I've got two components.

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

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 component 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 component // 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.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react"></div>