1

Let's say I have a function:

import React from "react";

const Test = () => {
  return (
    <React.Fragment>
      <h1>Hello World</h1>
    </React.Fragment>
  );
};

export default Test;

I want to toggle the Hello World text on and off with a button. How would I achieve this? I have looked at:

  1. How React.js Toggle Button Works

  2. React js onclick toggle class in map function

And none of them helped really. They used this.state, to which I got a type error, and then I started wondering if I should use a variable type function or not, as all the tutorials I've looked at use class instead. So my question is, how would I achieve toggling text in a variable type function?

If you need anymore information, or if my question was poorly phrased, please tell me. Any help is very much appreciated. Thank you!

Improve this question

2 Answers 2

Reset to default
1

this.state has no meaning in your functional component.

Instead you could do something like this:

import React, { useState } from "react";

const Test = () => {
  const [showText, setShowText] = useState(false);
  return (
    <React.Fragment>
      {showText && <h1>Hello World</h1>}
      <button onClick={() => setShowText(!showText)}>Toggle</button>
    </React.Fragment>
  );
};

We use useState to create some state and set its initial value to false (i.e. The text should not be shown).

Then inside the onClick property of our button we can toggle the state value between true and false by setting showText and use this to conditionally render the text.

sandbox example

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Great! That works, thank you so much Bas! One more thing though, if I have another paragraph, (like this), the Hello World text is on top of the "Lorem ipsum dolor sit amet" text (obviously). But is there a way that the hello world text could be beside that paragraph instead of on top?
Do you mean you want the h1on the left and the p on the right visually?
For the styling part you could render a div which has an h1 and a p tag inside of it. Then you could use flexbox to put the h1 and p next to eachother by letting these styles apply on the div: display: 'flex', alignItems: 'center'. You could put spacing on the items as needed. As far as the refresh problem goes, React doesn't persist data across refreshes. You could use sessionStorage to do this for example, but I think that would fit better as a separate question if you don't figure it out.
...Or use localStorage if you don't want the data to be cleared when the page session ends.
@Snowi No problem, glad to help. Btw in addition to accepting answers you can also upvote answers that you find helpful, as you've surpassed the threshold of 15 reputation.
|
0

Toggle the Paragraph text on and off with a button, solved it-

Easily Solve it:

import React, { useState } from 'react';
import Button from '@mui/material/Button';


function App() {
 const [showParagraph, setShowParagraph]=useState(false)
 console.log('App RUNNING');
 const toggleParagrapher = () => {
    setShowParagraph((prevparagraph)=> !prevparagraph)
 }

  return (
    
    <div >
      <h1>Hi</h1>
      {showParagraph && <p>Hello Word</p> }
      <Button onClick={toggleParagrapher} variant="contained" color="success">
        Submit
      </Button>
    </div>
  );
}

export default App;
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.