toggle react hooks button and content at the same time

This worked for me:

import React, { useState } from "react";

function App() {
  const [openMenu, setOpenMenu] = useState("first");

  const toggleMenu = () => {
    if (openMenu === "first") {
      setOpenMenu("second");
    } else {
      setOpenMenu("first");
    }
  };
  return (
    <div className="App">
      <button
        onClick={toggleMenu}
      >{`Click here to swap content`}</button>

      {openMenu === "first" ? (
        <div>
          <p>First Div content</p>
        </div>
      ) : (
        <div>
          <p>Second Div content</p>
        </div>
      )}
    </div>
  );
}

export default App;

You were doing the right thing, but instead of returning null when openMenu is false, you should render the other content.

import React, { useState } from "react";

function App() {
  const [openMenu, setOpenMenu] = useState(true);

  const toggleMenu = () => {
    setOpenMenu(!openMenu);
  };
  return (
    <div className="App">
      {openMenu ? (
        <div>
          <button
            onClick={toggleMenu}
          >{`Click here to show second Div content`}</button>
          <p>First Div content</p>
        </div>
      ) : (
        <div>
          <button
            onClick={toggleMenu}
          >{`Click here to show first Div content`}</button>
          <p>second Div content</p>
        </div>
      )}
    </div>
  );
}

export default App;

You can do it like this;

  const toggleMenu = () => {
    setOpenMenu(!openMenu);

    if(openMenu){
    setOpenMenu2("first");
       } else {
      setOpenMenu2('second')
    }

  };
  return (
    <div className="App">
      <button
        onClick={toggleMenu}
      >{`Click here to show ${openMenu2} Div content`}</button>

      {openMenu ? (
        <div>
          <p>First Div content</p>
        </div>
      ) : <div><p> Second Div content </p> </div>}
    </div>
  );
}