CODEWITHSUNDEEP
javascriptreactjs
devanshi
devanshi

Reputation: 141

I am new to reactjs - looking to add some conditional class that come into action

I am new to reactjs - looking to add some conditional class that comes into action when I click on login. It shows me toggle(current selected) and same as when i click on register it show me toggle(current selected)

<div className="box-controller"> 
  <div className={"controller" + (this.state.isLoginOpen ? "selected" : "")} onClick={this.showLoginBox}>
    Login
  </div>

  <div className={"controller" + (this.state.isRegisterOpen ? "selected" : "")} onClick={this.showRegisterBox}>
    Register
  </div>
</div>

<div className="box-container">
  {this.state.isLoginOpen && <Login></Login>}
  {this.state.isRegisterOpen && <Register></Register>}
</div>

Upvotes: 0

Views: 49

Answers (1)

Towerss
Towerss

Reputation: 674

Here is an example using the imported css file and another with inline styling: 

import React, { useState } from "react";
import "./styles.css";


export default function App() {
  const [isLoginOpen, setIsLoginOpen] = useState(true);
  const [isRegisterOpen, setIsRegisterOpen] = useState(false);

  const toggle = () => {
    setIsLoginOpen(!isLoginOpen);
    setIsRegisterOpen(!isRegisterOpen);
  }

  return (
    <div className="App">
        <button onClick={toggle} >Toggle</button>
        {isLoginOpen ? <p>Login</p> : <p className="selected">Login</p>}
        {isRegisterOpen ? <p>Register</p> : <p style={{borderBottom: "1px solid blue"}}>Register</p>}
    </div>
  );
}

Upvotes: 1

Related Questions