Hide button using onClick in Functional Components in React.js

Question

By clicking on the button I need it to hide de button all this using Functional components onClick in React.js

Demo

Answer 1

You can create a local state using useState hook to keep the content hidden between re-renders, and conditionally render content as shown below:

import React, {useState} from 'react'
export default function App() {
const [hidden, setHidden] = useState(false);
  return (
     <div className="App">
      <h1>OnClick in the button show and hide</h1>
      {!hidden && <button onClick={() => setHidden(true)}>Click Me</button>}
    </div>
  );
}