'Hiding and showing content on click using React

In a nutshell, i am creating a case study for a potential job, the employer wants me to use a React app to create it...

I want to create a button that has the start function that:

Hides original content
displays the hidden content,

i got the hidden content to show but the original content is still visible, any help?

my code below:

import React, { useState } from 'react'

function Body() {

    const [show, setShow] = useState(true);
    const [hide, setHidden] = useState(true);

  return (
      
    <>  
        <div className='container'>
            <div className="start-container">
                <h2>Click Start To View The Application</h2>
                <button onClick={ () => setShow(s => ! s) } className='btn'>Start!</button>         
            </div>
            
            {/* URL Link Input */}
            <div>
                {!show ? <form action="GET">
                    <input type="text" />
                    <button className='btn'>Submit</button>
                </form> : null }
                
            </div>
        </div>
    </>
    
  )
}

export default Body

javascript reactjs

Solution 1:^[1]

it dose not need hide state and you can toggle visibility just with show state. try this:

 { show ? <form action="GET">
  <input type="text" />
  <button className='btn'>Submit</button>
    </form> : null
 }

Solution 2:^[2]

You are close, you need to have the original content in the ternary so it's hidden once you toggle show. I also changed setShow to set show to false rather than the previous value since it doesn't matter because the button is not toggable because once you click it and can't re toggle the original content.

import React, { useState } from 'react'

function Body() {    
    const [show, setShow] = useState(true);

    return (
        <div className='container'>
            {show ? (
               <div className="start-container">
                  <h2>Click Start To View The Application</h2>
                  <button onClick={() => setShow(false)} className='btn'>Start!</button>         
               </div>
            ) : (
               <form action="GET">
                  <input type="text" />
                  <button className='btn'>Submit</button>
               </form>
            )
        </div>
  )
}

export default Body

Solution 3:^[3]

This should work.

import React, { useState } from 'react';

function Body() {
const [show, setShow] = useState(false);

return (
    <>
        <div className="container">
            {/* URL Link Input */}
            <div>
                {show ? (
                    <form action="GET">
                        <input type="text" />
                        <button className="btn">Submit</button>
                    </form>
                ) : (
                    <div className="start-container">
                        <h2>Click Start To View The Application</h2>
                        <button onClick={() => setShow(!show)} className="btn">
                            Start!
                        </button>
                    </div>
                )}
            </div>
        </div>
    </>
);
}

export default Body;

Solution 4:^[4]

You could use an appStarted state and then render your component conditionnally:

const { useState } = React

function Body() {
  const [appStarted, setAppStarted] = useState(false)

  return (
    <div className="container">
      {appStarted ? (
        <div>
          <h2>Hidden Content</h2>
        </div>
      ) : (
        <div className="start-container">
          <h2>Click Start To View The Application</h2>
          <button onClick={ () => setAppStarted(true) } className='btn'>Start!</button>
        </div>
      )}
    </div>
  )
}


ReactDOM.render(<Body />, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Hesam
Solution 2	Alex K
Solution 3	Shubham Mistry
Solution 4

'Hiding and showing content on click using React

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]