- This repository consists solutions for the 2 assignments of
Walkthrough with ReactJS - 2. - They have been divided into 2 folders :
CounterAppandInstagramLogin
- set the state variable
countto 0.
const [count, setCount] = useState(0);
- In the
setCount():
- Increment the count variable by 1 in the setter function for the Increment method
- Decrement the count variable by 1 in the setter function for the Decrement method
function Increment(){
console.log("Increment");
setCount(count+1)
}
function Decrement(){
console.log("Decrement");
setCount(count-1);
}
- The login page is designed using
conditional renderingin ReactJS - set the state of the variable of the
loginto true.
const [login, setLogin] = useState(true);
- Add a custom function Change(), which changes the state of the variable login in the
setLoginsetter function.
function Change(){
setLogin(!login)
}
- Using
conditional rendering, toggle between input fields for SignIn and SignUp
<div className='inputFields'>
<input hidden={login} className='input' type='text' placeholder='Mobile Number'/>
<input hidden={login} className='input' type='text' placeholder='Full Name'/>
<input className='input' type='email' placeholder='Email'/>
<input className='input' type='password' placeholder='Password'/>
</div>
- The state of the Login page changes with
onClickfunction, toggling between SignIn and SignUp due to conditional rendering
<div className='link'>
{login?"Don't have an account?":"Have an account?"}
<span onClick={Change}>
{login?"Sign Up":"Sign In"}
</span>
</div>
- Counter App
cd CounterApp
npm run dev
- Instagram Login Page
cd InstagramLogin
npm run dev