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
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
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
}
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>