リアクトでもっと情報を表示

Question

私はもっと多くの情報をonclickに表示したいが、私は表示/非表示に異なるdivがある。 だから。私はそれをこのように実行します。 状態は次のとおりです。div要素の

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

ワン：

     <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> 

機能：

ショー（名）{ 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 
    }); 
} 

これは、それを改善する方法（私は一度に一つの拡大のdivを見ることができる）醜い、長すぎると正しく動作しませんか？

Answer 1

これは、より良いとクリーンな方法です：あなたは私たちに詳細&報酬の構造を示すことができればそれが容易になる可能性が

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 
    }); 

Answer 2

。私はあなたがここに単一の要素をマッピングしていると思うので、なぜそれが単一の要素を印刷しているのでしょうか。しかし、

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

は、以下のコードに置き換え、この行を変更してみてください：

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