[Solved]-How to hide a button when I click the button in react using functional components-Reactjs

You need to do ternary condition to show and hide value:

{show && <button onClick={hideButton} className='btn btn-primary'>Click here</button>}

Full code:

import React, { useState } from "react";
import "./styles.css";

const Parent = () => {
  const [show, hide] = useState(true);

  const hideButton = () => {
    hide(false);
  };
  return (
    <div className="container">
      <div className="row">
        <div className="col-12">
          <div className="one">
            {show && (
              <button onClick={hideButton} className="btn btn-primary">
                Click here
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Parent />
    </div>
  );
}

Here is the demo: https://codesandbox.io/s/romantic-newton-1wvl1?file=/src/App.js:0-678