ReactJS How to implement Show More Button?

Question

Currently, I use mapping to show 10 activities report with 'slice(0,10)', my second step is to implement a "SHOWMORE" button to show all report? I use Reactjs to implement my code. I read some posts on stackoverflow on this topic already, but still I am not sure where to start.

Below is my code:

import React, { Component } from 'react';
import FontAwesome from 'react-fontawesome';
class RewardActivity extends Component {
    constructor(props) {
        super(props);
        this.state = {
            rewardActivities: this.props.reward.rewardsAccount.rewardsActivities
        };

        this.state.rewardActivities.map(function (d, i) {
            if (d.activityType === 'EARN_STARS') {
                d.icon =
                    < FontAwesome
                        name='starfar fa-star-o'
                        size='2x'
                        border='true'
                        style={{ color: 'white', background: 'orange', border: 'orange', }
                        } />
            }
            else if (d.activityType === 'ISSUED_REWARD') {
                d.icon =
                    < FontAwesome
                        name='fas fa-trophy  -0'
                        size='2x'
                        border='true'
                        style={{ color: 'white', background: '#38ACEC', border: '#38ACEC', }
                        } />
            }
        })
    }
    render() {
        return (
            <div>
                <div className="welcome-content__events">
                    <div className="welcome-content__events__title">
                        Activity
          </div>
                    <div data-events-list-content>
                        {
                            this.state.rewardActivities.slice(0, 10).map(function (d, i) {

                                return (
                                    <div key={i} className="welcome-content__events__table-row">
                                        <div className="welcome-content__event__type-img">
                                            {d.icon}
                                        </div>
                                        <div>
                                            <div className="welcome-content__event__title">{d.title}</div>
                                            <div className="welcome-content__event__subtitle">{d.dateTime}</div>
                                        </div>
                                    </div>
                                )
                            })}
                    </div>
                </div>
            </div>
        );
    }
}

export default RewardActivity;

Answer 1

Use the state to show more. As you have it right now, the default is to show 10. When you click the button, change the state to show all, which you can then set for the entire list.

Here is an example app that will do exactly that:

class App extends React.Component{
  constructor (props) {
    super(props)
    this.state = {
      showMore: false
    }
  }
  handleClick() {
    this.setState({showMore: true})
  }
  render(){
    const list = [
      'list 1',
      'list 2',
      'item 3',
      'item 4',
      'item 5',
      'item 6',
      'item 7',
      'item 8',
      'item 9',
      'item 10',
      'item 11',
      'item 12',
      'item 12',
      'item 14',
      'item 15',
      'item 16',
      'item 17',
      'item 18',
    ]
    
    const numberOfItems = this.state.showMore ? list.length : 10
    return (
     <div>
        {list.slice(0, numberOfItems).map((item)=> {
          return (
          <div>{item}</div>
           )
        })}
        <button onClick={()=> this.handleClick()}>Show more</button>
     </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

<div id="app"></div>    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>