by clicking on HomePage button I want to show the component HomePage and by clicking on Cart button I want to show the component Cart. In my DevTools the App does not recognize the Cart component.. and if I click on one of the buttons its just stays in the default which is the HomePage (but it is recognize the boolean answer which is false when its HomePage and true when its Cart), Why it does not switch to the Cart component by clicking on the button? it seems like i connected the components in the right way, and also the function that does the action.
*its really important for me to keep it the simple way like I did, because I want to understand before I move on... (also with no routers or hooks! (: thanks! )
Thank you so much everyone!
App.js
import React, { Component } from 'react'
import './App.css';
import Cart from './components/Cart.js'
import HomePage from './components/HomePage.js'
export default class App extends Component {
state={
flag: false
}
show=()=> {
if(this.flag===true){
return(
<div> <Cart/> </div>
)
}
else {
return(
<div> <HomePage/> </div>
)
}
}
//////
render() {
return (
<div className="App">
<button onClick={()=>{this.setState({flag:true})}}>Cart</button>
<button onClick={()=>{this.setState({flag:false})}}>HomePage</button>
{this.show()}
</div>
)
}
}
HomePage.js
import React from 'react'
export default function HomePage() {
return (
<div>
H
</div>
)
}
Cart.js
import React from 'react'
export default function Cart() {
return (
<div>
C
</div>
)
}
Change your App.jsx like bellow:
import React, { Component } from 'react'
import './App.css';
import Cart from './components/Cart.js'
import HomePage from './components/HomePage.js'
export default class App extends Component {
state={
flag: false
}
render() {
return (
<div className="App">
<button onClick={()=>{this.setState({flag:true})}}>Cart</button>
<button onClick={()=>{this.setState({flag:false})}}>HomePage</button>
{this.state.flag && (
<div><Cart/></div>
)
}
{!this.state.flag && (
<div><HomePage/></div>
)
}
</div>
)
}
}
also you can try this bellow:
import React, { Component } from 'react'
import './App.css';
import Cart from './components/Cart.js'
import HomePage from './components/HomePage.js'
export default class App extends Component {
state={
flag: false
}
const show=()=> {
if(this.state.flag){
return <Cart/>
}
else {
return <HomePage/>
}
render() {
return (
<div className="App">
<button onClick={()=>{this.setState({flag:true})}}>Cart</button>
<button onClick={()=>{this.setState({flag:false})}}>HomePage</button>
<div>{this.show}</div>
</div>
)
}
}