REACT JS How to show one component and hide the others on click

Question

i need your help because i can't make a single page website with many components who are hide and show. I have begin with this code but when I click on all link, all of the components is showing at the same time. I would show one component when I click on "portfolio" and hide the others. And if I click on "Offres" the "portfolio" is hidden like the others for show "Offres".

Thank you so much and sorry for my english.

import './style.css'

import logo_studio from './assets/logo_studio.png'
import Main from './components/Main'
import Portfolio from './components/Portfolio'
import Offres from './components/Offres'
import Contact from './components/Contact'
import Apropos from './components/Apropos'

class App extends Component {
  constructor () {
    super()
    this.state = {
      name: 'React',
      showHideDemo1: false,
      showHideDemo2: false,
      showHideDemo3: false,
      showHideDemo4: false

    }
    this.hideComponent = this.hideComponent.bind(this)
  }

  hideComponent (name) {
    switch (name) {
      case 'showHideDemo1':
        this.setState({ showHideDemo1: !this.state.showHideDemo1 })
        break
      case 'showHideDemo2':
        this.setState({ showHideDemo2: !this.state.showHideDemo2 })
        break
      case 'showHideDemo3':
        this.setState({ showHideDemo3: !this.state.showHideDemo3 })
        break
      case 'showHideDemo4':
        this.setState({ showHideDemo4: !this.state.showHideDemo4 })
        break
      default:
        return <Main />
    }
  }

  render () {
    const { showHideDemo1, showHideDemo2, showHideDemo3, showHideDemo4 } = this.state


    return (
      <div className='section'>
        <img src={logo_studio} class='logo1' alt='' />

        <div className='connect sweep-to-right'>
          <div>Espace client</div>
          <i className='fas fa-user-circle userLogo' />
        </div>

        <div className='menu1'>
          <ul>
            <li className='hvr-float underline-from-left' onClick={() => this.hideComponent('showHideDemo1')}>Portfolio</li>
            <li className='hvr-float underline-from-left' onClick={() => this.hideComponent('showHideDemo2')}>Offres</li>
            <li className='hvr-float underline-from-left' onClick={() => this.hideComponent('showHideDemo3')}>A propos</li>
            <li className='hvr-float underline-from-left' onClick={() => this.hideComponent('showHideDemo4')}>Contact</li>
          </ul>
        </div>

        {showHideDemo1 && <Portfolio />}
        {showHideDemo2 && <Offres />}
        {showHideDemo3 && <Apropos />}
        {showHideDemo4 && <Contact />}

      </div>
    )
  }
}

export default App```

Answer 1

You should use one value to keep a track of what is opened and display it. I am using showItem to keep a track of what is open.

import './style.css'

import logo_studio from './assets/logo_studio.png'
import Main from './components/Main'
import Portfolio from './components/Portfolio'
import Offres from './components/Offres'
import Contact from './components/Contact'
import Apropos from './components/Apropos'

class App extends Component {
  constructor () {
    super()
    this.state = {
      name: 'React',
      showItem: ''

    }
    this.hideComponent = this.hideComponent.bind(this)
  }

  hideComponent (name) {
    switch (name) {
      case 'showHideDemo1':
        this.setState({ showItem: this.state.showItem !== 'showHideDemo1' ? 'showHideDemo1' : '' })
        break
      case 'showHideDemo2':
        this.setState({ showItem: this.state.showItem !== 'showHideDemo2' ? 'showHideDemo2' : '' })
        break
      case 'showHideDemo3':
        this.setState({ showItem: this.state.showItem !== 'showHideDemo3' ? 'showHideDemo3' : '' })
        break
      case 'showHideDemo4':
        this.setState({ showItem: this.state.showItem !== 'showHideDemo4' ? 'showHideDemo4' : '' })
        break
      default:
        return <Main />
    }
  }

  render () {
    const { showItem } = this.state


    return (
      <div className='section'>
        <img src={logo_studio} class='logo1' alt='' />

        <div className='connect sweep-to-right'>
          <div>Espace client</div>
          <i className='fas fa-user-circle userLogo' />
        </div>

        <div className='menu1'>
          <ul>
            <li className='hvr-float underline-from-left' onClick={() => this.hideComponent('showHideDemo1')}>Portfolio</li>
            <li className='hvr-float underline-from-left' onClick={() => this.hideComponent('showHideDemo2')}>Offres</li>
            <li className='hvr-float underline-from-left' onClick={() => this.hideComponent('showHideDemo3')}>A propos</li>
            <li className='hvr-float underline-from-left' onClick={() => this.hideComponent('showHideDemo4')}>Contact</li>
          </ul>
        </div>

        {showItem === 'showHideDemo1' && <Portfolio />}
        {showItem === 'showHideDemo2' && <Offres />}
        {showItem === 'showHideDemo3' && <Apropos />}
        {showItem === 'showHideDemo4' && <Contact />}

      </div>
    )
  }
}

export default App```

Answer 2

You have to use the Router library for this task react-router-dom. You can manage this small scenario by changing your code. As you have to show only one component at a time, you can manage this by only one state variable let say showComponentCount

Change your code by given code

import './style.css'
import logo_studio from './assets/logo_studio.png'
import Main from './components/Main'
import Portfolio from './components/Portfolio'
import Offres from './components/Offres'
import Contact from './components/Contact'
import Apropos from './components/Apropos'

class App extends Component {
  constructor () {
    super()
    this.state = {
      name: 'React',
      showComponentCount: 0
    }
    this.showComponent = this.showComponent.bind(this)
  }

  showComponent (count) {
    this.setState({ showComponentCount: count })
  }

  render () {
    const { showComponentCount } = this.state

    return (
      <div className='section'>
        <img src={logo_studio} class='logo1' alt='' />

        <div className='connect sweep-to-right'>
          <div>Espace client</div>
          <i className='fas fa-user-circle userLogo' />
        </div>

        <div className='menu1'>
          <ul>
            <li className='hvr-float underline-from-left' onClick={() => this.showComponent(0)}>Portfolio</li>
            <li className='hvr-float underline-from-left' onClick={() => this.showComponent(1)}>Offres</li>
            <li className='hvr-float underline-from-left' onClick={() => this.showComponent(2)}>A propos</li>
            <li className='hvr-float underline-from-left' onClick={() => this.showComponent(3)}>Contact</li>
          </ul>
        </div>

        {showComponentCount == 0 ? <Portfolio /> : null}
        {showComponentCount == 1 ? <Offres /> : null}
        {showComponentCount == 2 ?<Apropos /> : null}
        {showComponentCount == 3 ? <Contact /> : null}

      </div>
    )
  }
}

export default App

In this code, I have changed hideComponent to showComponent as We have to show only one component at a time.

We just assign each component a number so that we can check it for rendering a component.

I hope this will work for you.