How to display div based on list onclick-CodePudding

I have list of 3 filters* (ALL, UPCOMING AND SOLDOUT) and I need to display only one div for one list onclick (ListAllItems() to display only itemList div, but hide ListUpcomingItems div, and onClick ListUpcomingItems to display only ListUpcomingItems div and hide others.

<div className='itemFilterSortContainer'>
                        <ul className='filter-drops'>
                            <li onClick={()=>ListAllItems()}>
                                ALL
                            </li>
                            <li onClick={()=>ListUpcomingItems()}>
                                UPCOMING
                            </li>
                            <li onClick={()=>ListSoldOutItems()}>
                                SOLD OUT
                            </li>
                        </ul>
                    </div>
                    <div className='itemList'>
                        {drops.filter(drop=>drop.releaseDate).map(i => (
                            <Link to={`/marketplace/drops/${i.itemId}`} key={`${i.itemId}`}>
                                <ItemCard
                                    item={i}
                                    firstLabel='lowest ask'
                                    firstValue={i.minPrice ? `${numberWithDots(i.minPrice)} $` : ''}
                                    secondLabel='listings'
                                    secondValue={i.listingsCount ? i.listingsCount.toString() : ''}
                                />
                            </Link>
                        ))}
                    </div>
                    <div className='ListUpcomingItems'>
                        {drops.filter(drop=>drop.releaseDate && drop.listingsCount === 0).map(i => (
                                <Link to={`/marketplace/drops/${i.itemId}`} key={`${i.itemId}`}>
                                    <ItemCard
                                        item={i}
                                        firstLabel='lowest ask'
                                        firstValue={i.minPrice ? `${numberWithDots(i.minPrice)} $` : ''}
                                        secondLabel='listings'
                                        secondValue={i.listingsCount ? i.listingsCount.toString() : ''}
                                    />
                                </Link>
                        ))}
                    </div>

CodePudding user response：

You can use conditional rendering to do it.

{
    isAllItem &&
        <div className='itemList'>
            {drops.filter(drop => drop.releaseDate).map(i => (
                <Link to={`/marketplace/drops/${i.itemId}`} key={`${i.itemId}`}>
                    <ItemCard
                        item={i}
                        firstLabel='lowest ask'
                        firstValue={i.minPrice ? `${numberWithDots(i.minPrice)} $` : ''}
                        secondLabel='listings'
                        secondValue={i.listingsCount ? i.listingsCount.toString() : ''}
                    />
                </Link>
            ))}
        </div>
}

{
    isUpcomingItem &&
        <div className='ListUpcomingItems'>
            {drops.filter(drop => drop.releaseDate && drop.listingsCount === 0).map(i => (
                <Link to={`/marketplace/drops/${i.itemId}`} key={`${i.itemId}`}>
                    <ItemCard
                        item={i}
                        firstLabel='lowest ask'
                        firstValue={i.minPrice ? `${numberWithDots(i.minPrice)} $` : ''}
                        secondLabel='listings'
                        secondValue={i.listingsCount ? i.listingsCount.toString() : ''}
                    />
                </Link>
            ))}
        </div>
}

CodePudding user response：

You need a variable to hold a unique value for each list. Then you change this variable on click of every button you select the list. Finally you make conditional rendering for each list container.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      visibleList: 'listA',
    };
    
    this.changeListShown = this.changeListShown.bind(this);
  }
  
  changeListShown(list) {
    this.setState({
      ...this.state,
      visibleList: list,
    });
  }
  
  render() {
    return (
      <div>
        <div>
          <button onClick={() => this.changeListShown('listA')}>Show list A</button>
          <button onClick={() => this.changeListShown('listB')}>Show list B</button>
          <button onClick={() => this.changeListShown('listC')}>Show list C</button>
          {this.state.visibleList === 'listA' && <div>list A</div>}
          {this.state.visibleList === 'listB' && <div>list B</div>}
          {this.state.visibleList === 'listC' && <div>list C</div>}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, document.querySelector('#container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="container"></div>