How to handle onClick event to display text after the click-CodePudding

Using react typescript and I’m confused that when I click a button I want some text to appear below the button or at-least anywhere so I made a function to handle the onClick from the button and returned a h1 from the function but turns out no h1 appears on screen after button click. Any idea why?

const handleOnClick=(id:any)=>{
    console.log("button clicked"   id)
    return(
      <h1>Clicked it</h1>
    );

} My Function is this and in another function I have

<button onClick={()=>{handleOnClick(someId)}}>a</button>

I can see the console log but the h1 doesn’t work. Any ideas?

CodePudding user response：

If you think about it, what your handleOnClick doing is returning a bunch of jsx, where do you think these jsx will appear since we didn't specify any location for them? Now if you try something like this:

<button>{ handleOnClick('someId') }</button>

You will see the h1 on the screen because you specify that's where you want to render it, right inside the button element.

A classic way in js to render out something on button click is like this:

const handleOnClick=(e)=>{
   // create the element
   const newEle = document.createElement('h1');
   newEle.innerText = 'Hello';

   // append it inside the button
   e.target.appendChild(newEle);
}

CodePudding user response：

When the click is triggered, you need to add the <h1> element into your JSX code, and returning it from the click handler is not enough because you need to tell it where is should be added.

A good way of doing that in React is by using a state which tells you if the button was clicked or not, and if it was, then you display the <h1> element onto the screen. See the code below:

 const [isActive, setIsActive] = useState(false);


const handleOnClick = (id) => {
     console.log("button clicked"   id);
     setIsActive(true);


};

and in your JSX code, below the button you just need to add the second line of the following:

<button onClick={()=>{handleOnClick(someId)}}>a</button>
{isActive && <h1>Button was clicked.</h1>}

And if you want to toggle the click, So the first time you click the <h1> is showing , but if you click again it disappears, then you could simply do this in the handleOnClick function instead of the above:

const handleOnClick = (id) => {
console.log("button clicked"   id);

    setIsActive((prevState) => (prevState === false ? true : false));
  };

Hope this helps!

CodePudding user response：

export default function App() {
    const [nameId, setNameId] = useState<String>("");

    const handleClick = (id: String) => () => {
        console.log("button clicked: ", id);
        setNameId(nameId ? "" : id);
    };

    return (
        <>
            <button onClick={handleClick("Rohan")}>
                {nameId ? "Hide" : "Greet"}
            </button>
            {!!nameId && <h1>Hello {nameId} Haldiya</h1>}
        </>
    );
}