React - hide content with button-CodePudding

i'm new here. I got a problem with a task. I want a button that if you press it hides some content, a string in this case. If the content is hidden the button must change the text inside it, and it must say "show" and instead of hiding it shows the content previously hidden. If the content is already displayed, the button text will be "hide". I don't understand how to use if statement

...

import React { useState } from "react";

function App() {
  const [hideText, setHideText] = useState(false);

  const onClick = () => setHideText(false);

  return (
    <div>
      <button onClick={onClick}>Click me</button>
      {hideText ? <Text /> : null}
    </div>
  );
}

const Text = () => <div>I will disappear, true Magic</div>;
export default App;

...

CodePudding user response：

import React { useState } from "react";

function App() {
  const [isVisible, setVisible] = useState(true);

  const onClick = () => setVisible(!isVisible);

  return (
    <div>
      <button onClick={onClick}>{isVisible? 'Hide' : 'Show'}</button>
      {isVisible? <Text /> : null}
    </div>
  );
}

const Text = () => <div>I will disappear, true Magic</div>;
export default App;

CodePudding user response：

I don't know if I correctly understood your needs. I changed the variable name to be more meaningful :) Now the button shows Hide when the text is visible and Show when it's hidden. Clicking the button changes the state.

import React { useState } from "react";

function App() {
  const [isTextHidden, setTextHidden] = useState(true);

  const onClick = () => setTextHidden(!isTextHidden);

  return (
    <div>
      <button onClick={onClick}>{isTextHidden ? 'Show' : 'Hide'}</button>
      {!textHidden ? <Text /> : null}
    </div>
  );
}

const Text = () => <div>I will disappear, true Magic</div>;
export default App;