CODEWITHSUNDEEP
javascriptreactjs
TrevTheDev
TrevTheDev

Reputation: 37

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:

  1. Hides original content

  2. 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

Upvotes: 0

Views: 1893

Answers (4)

pierre-lgb
pierre-lgb

Reputation: 922

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>

Upvotes: 0

Shubham Mistry
Shubham Mistry

Reputation: 159

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;

Upvotes: 0

Hesam
Hesam

Reputation: 500

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
 }

Upvotes: 0

Alex K
Alex K

Reputation: 890

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

Upvotes: 1

Related Questions