CODEWITHSUNDEEP
javascriptreactjsif-statementstateshow-hide
Elena
Elena

Reputation: 649

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?

Upvotes: 0

Views: 866

Answers (2)

Upasana
Upasana

Reputation: 1975

It could be easier if you could show us the structure of detail & rewards. I guess you are mapping a single element here that's why it is printing single element. However, try changing this line, 

detail.rewards.reward.map((name, i) => <p key={i}> { name }</p> )

replace with below code:

detail.rewards.map((reward, i) => <p key={i}> { reward.name }</p> )

Upvotes: 0

Tal Avissar
Tal Avissar

Reputation: 10304

This is a better and a cleaner way: 

function show (name) { 

  let { showMore, showRewards, showFees } = this.state;
  showMore = name === 'hightlights' && showMore === false;
  showRewards = name === 'rewards' && showRewards === false;
  showFees = name === 'fees' && showFees === false;

  this.setState({
    showFees,
    showRewards, 
    showMore
  });

Upvotes: 2

Related Questions