I'm attempting to use boolean props: when the user clicks on the Selected button, the Select text should be hidden

Question

and when the user clicks "Selected," show the Select,Please take a look at my code and tell me where I'm going wrong.

This is the App.js file I'm working on. 

import "./styles.css";
import MainShow from "./Show";
import { useState } from "react";

export default function App() {
  var [isDone, setDone] = useState(false);
  const Delected = () => {
    setDone(!isDone);
    console.log("set");
  };
  const Selected = () => {
    setDone(!isDone);
    console.log("Del");
  };
  return (
    <div className="App">
      <h1>Hello ,Problem Solver</h1>
      <MainShow DoneMain={isDone} /> //imported
      <button onClick={Delected}>Delected</button>  //Delected button 
      <button onClick={Selected}>Selected</button>  //Selected button
    </div>
  );
}

This MainShow file has the Main function.Look at my code on CodeSandbox

import React, { useState } from "react";
const Main = (props) => {
  const [isDone] = useState(props.DoneMain);
  console.log(isDone);
  return (
    <div>
      <div>
        <div
          className="container"
          style={{ display: isDone ? "block" : "none" }}
        >
          <p> Select</p>
        </div>
        <p>Hello</p>
      </div>
    </div>
  );
};
export default Main;

When the user clicks on the "Deleted" button, I want "Select" to be hidden, and when the user clicks on "Selected," I want "Select" to be displayed. 

Answer 1

Check for state value changes and show/hide

  const Delected = () => {
    setDone(false);
    console.log("set");
  };
  const Selected = () => {
    setDone(true);
    console.log("Del");
  };


  {isDone && <MainShow DoneMain={isDone} />}

Demo