Hiding and showing content on click using React-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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
 }

CodePudding user response：

You could use the useState() hook 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>

CodePudding user response：

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;