jeudi 6 juillet 2017

Show more info in React

I want to show more info onclick, but I have different divs to show/hide . So. I do it this way : The state is :

this.state = {
        showMore: false,
        showRewards: false,
        fees: false,
        showFees: false
    };

One of the divs:

                      <div className='some'>
                          <h3 >Rewards <i className="icon-im-rewards"></i></h3>
                                  <h5 className="showMoreDetails" onClick={ () => this.show('rewards') }>{ showRewards ? '-' : '+' } { showRewards ? 'Show Less' : 'Show More' }</h5>
                          {   showRewards && detail.rewards.reward.map((name, i) =>
                                  <p key={i}> { name }</p>
                              )
                          }
                      </div>

The function :

show (name) { let { showMore, showRewards, showFees } = this.state;

if (name === 'hightlights' && showMore === false) {
    this.setState({
        showMore: true
    });
} else {
    this.setState({
        showMore: false
    });
}

if (name === 'rewards' && showRewards === false) {
    this.setState({
        showRewards: true
    });
} else {
    this.setState({
        showRewards: false
    });
}

if (name === 'fees' && showFees === false) {
    this.setState({
        showFees: true
    });
} else {
    this.setState({
        showFees: false
    });
}

This is too long, ugly and doesn't work correct (I can only see one expanded div at a time) How to improve it?

Aucun commentaire:

Enregistrer un commentaire