CODEWITHSUNDEEP
reactjs
Nat
Nat

Reputation: 749

Calling a component based on conditions

how do call the Test component if it does not meet certain condition else call the Login component?

function App() {
  return (
    <div>
      <Test/>
      <Login/>            
    </div>
  );
}

This is my Test component:

const Test = () => {
    return (
      <div id="pcoded" className="pcoded">
        <div className="pcoded-overlay-box" />
        <div className="pcoded-container navbar-wrapper">
        <Navbar/>
          <div className="pcoded-main-container">
            <div className="pcoded-wrapper">                 
                <Sidebar/>   
                  <Switch>
                    <Route exact path="/" component={Content}/>
                    <Route exact path="/content" component={Content}/>
                    <Route exact path="/contenttwo" component={ContentTwo}/>
                  </Switch>           
             </div>
          </div>
        </div>
      </div>

    )
}

export default Test

many thanks in advance and greatly appreciate any helps. thanks again.

Upvotes: 0

Views: 94

Answers (2)

Matheus Martins
Matheus Martins

Reputation: 149

Try this

 const Conditional = () => {
        if (conditionalVar) {
            return (

               <Test/>
            )
        } else {
            return (

                <Login/>
            )
        }
    }
    function App(){
        return(
            <div>
                {Conditional()}
            </div>
        )
    }

Upvotes: 1

Udendu Abasili
Udendu Abasili

Reputation: 1213

UseState and function to change the condition


function App() {
  const [condition, setCondition] = useState("");
  // you can attach the function to a button or something
const functionToChangeCondition =(value) => {
 setCondition(value)
}

  return (
    <div>
      { condition === 'conditionA' && <Test/>}
      { condition === 'conditionB' && <login/>}
              
    </div>
  );
}

Your question is too ambiguous though because we are stating where the condition would be coming from. You may need to use props or it might be a condition change within the same component

Upvotes: 0

Related Questions