React - hide content with button

user_17125243 0
Viewed 239

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;

...

show-hide reactjs button javascript
2 Answers
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;
user_114560980

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;
user_50895670
Related