how fix selected permanently ReactJS

Question

I would like to explain my problem of the day.

the code works correctly , the only problem is when i click on my navbar to select a tab , my activeclassname works fine except that when i click elsewhere on the same page i lose my activeclassname I would like him to be active permanently

Do you have an idea of how to fix this?

class MainHome extends Component {

 constructor(props) {
    super(props);
    this.state = {
    };
    // preserve the initial state in a new object
    this.toggle = this.toggle.bind(this);
    this.cgtChange1= this.cgtChange1.bind(this);
    this.cgtChange2= this.cgtChange2.bind(this);
}

cgtChange1() {
    console.log('bière clicked')
    this.setState({
        cgt : 1
      })
}  
cgtChange2() {
    console.log('cocktails clicked')
    this.setState({
        cgt :2
      })
}

render() {
    let addedItems = this.props.items.length ?
        (
            this.props.items.filter(item => item.ctg === this.state.cgt).map(item => {
                return (
                    <div key={item.id}>            
                {item.title}                       
                    </div>
                )
            })) :
        (
            <div></div>
        )
    return (
        <div>

                                <Header text='Carte'/>
                                    <NavBar
                 onClick1={this.cgtChange1}
                 onClick2={this.cgtChange2}
                />

                {addedItems}    
        </div>
    )
  }
}

NavBar

  export default class FocusOnSelect extends Component {
   render() {
   return (
      <div>
           <button onClick={this.props.onClick1} 
    activeClasseName="selected" className='inactive' > Bières 
   </button>
      </div>
      <div >
           <button onClick={this.props.onClick2} activeClasseName="selected" className='inactive' >  Cocktails </button>
      </div> 
      </div>
   );
  }
  }

Please write a better explanation of your issue, you mentioning `activeclassname` but nowhere is in the code. You mention 'when i click elsewhere on the same page i lose my activeclassname' like where? Do you open another content? Do you click on another nav item? — golddragon007, Mar 05 '20 at 13:38
`this.baseState = this.state` it doesn't copy the state into new varaible; just another reference, so if you want to copy that, you need to [deep clone](https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript) it — Mechanic, Mar 05 '20 at 13:51
@Mhmdrz_A hello , i have edit , can you show my new edit pls :) — Neff, Mar 05 '20 at 13:58

how fix selected permanently ReactJS

0 Answers0