React активный класс для функции map

09 августа 2019, 08:30

Получается фильтр для календаря делаю через map и там 7 обьектов как сделать что бы при выборе там праздничных дат только праздничные получали класс active и при нажатии на другой фильтр другой обьект становился активный а все остальные теряли класс актив? есть ли пример какой? у меня вечно то все сразу активные то только первый клик(

{
_.map(this.firstRowEventTypes(), (item, key) =>
    <button className="event-type-item" onClick={() => this.filterEvents(item.color)} key={key}>
    <div className="event-type-circle" style={{backgroundColor: item.color}}/>
    <div onClick={ () => this.setState({active: this.state.active === item.color ? null : item.color}) }
className={classnames("event-type-name", this.state.active === item.color && 'calendar-filter-active')}>{item.name}</div>
</button>
    )  
}  
filterEvents(color) {
    const events = [];
    this.state.allEvents.map((val) => {
        if (val.color === color) {
            events.push(val);
        }
    });
    this.setState({...this.state, events});
}
firstRowEventTypes() {
        return [
            {color: '#108aeb', name: 'Заседания', id: '1'},
            {color: '#4caf50', name: 'Обучение', id: '2'},
            {color: '#87cefa', name: 'Праздники', id: '3'},
            {color: '#ff5252', name: 'Корпоративы', id: '4'},
            {color: '#ab47bc', name: 'Спорт', id: '5'},
            {color: '#e91e63', name: 'Культура', id: '6'},
            //color: '#8d6e63', name: 'Другое'},
            {color: '#d1d1d6', name: 'Другое', id: '7'},
            //{color: '#108AEB', name: 'Корпоративный'},
            //{color: '#87cefa', name: 'Гос. праздники'},
            //{color: '#e91e63', name: 'Корп. мероприятия'},
            //{color: '#8d6e63', name: 'Корп. развитие'},
            //{color: '#ffa726', name: 'Спортивный'},
        ];
    }

Answer 1

Не нужно ничего фильтровать в state, проще при рендере массив отфильтровать и всё.

class App extends React.Component { 
 
  constructor() { 
    super(); 
 
    this.state = { 
      events: [], 
      filters: [], 
      activeFilter: '1' 
    }; 
 
    this.getEvents = this.getEvents.bind(this); 
    this.getCategories = this.getCategories.bind(this); 
    this.selectFilter = this.selectFilter.bind(this); 
  } 
 
  componentDidMount() { 
    this.getCategories(); 
    this.getEvents(); 
  } 
 
  getCategories() { 
    const fetchedCategories = [ 
      {color: '#108aeb', name: 'Заседания', id: '1'}, 
      {color: '#4caf50', name: 'Обучение', id: '2'}, 
      {color: '#87cefa', name: 'Праздники', id: '3'}, 
      {color: '#ff5252', name: 'Корпоративы', id: '4'}, 
      {color: '#ab47bc', name: 'Спорт', id: '5'}, 
      {color: '#e91e63', name: 'Культура', id: '6'}, 
      {color: '#d1d1d6', name: 'Другое', id: '7'} 
    ]; 
    this.setState({ 
      filters: fetchedCategories 
    }) 
  } 
 
  getEvents() { 
    const fetchedEvents = [ 
      {categoryId: "2", name: "Something should happen"}, 
      {categoryId: "3", name: "Something should happen"}, 
      {categoryId: "2", name: "Something should happen"}, 
      {categoryId: "5", name: "Something should happen"}, 
      {categoryId: "5", name: "Something should happen"}, 
      {categoryId: "2", name: "Something should happen"}, 
      {categoryId: "1", name: "Something should happen"}, 
      {categoryId: "3", name: "Something should happen"}, 
      {categoryId: "3", name: "Something should happen"}, 
      {categoryId: "3", name: "Something should happen"}, 
      {categoryId: "4", name: "Something should happen"}, 
      {categoryId: "4", name: "Something should happen"}, 
      {categoryId: "6", name: "Something should happen"} 
    ]; 
    this.setState({ 
      events: fetchedEvents 
    }) 
  } 
 
  selectFilter(id) { 
    this.setState({ 
      activeFilter: id 
    }) 
  } 
 
  render() { 
    const { filters, events, activeFilter } = this.state; 
 
    return ( 
      <div> 
        <div className="filters"> 
          {filters && filters.map((filter, i) => ( 
            <button 
              key={`filter-${i}`} 
              className="event-type-item" 
              onClick={() => this.selectFilter(filter.id)} 
            > 
              <div 
                className="event-type-circle" 
                style={{backgroundColor: filter.color}} 
              ></div> 
              <div 
                className={`event-type-name ${activeFilter === filter.id && 'calendar-filter-active'}`} 
                // className={classnames( 
                //   "event-type-name", { 
                //     'calendar-filter-active': active === item.color 
                //   })} 
              > 
                {filter.name} 
              </div> 
            </button> 
          ))} 
        </div> 
        <div className="events"> 
          {events && events.filter(event => event.categoryId === activeFilter).map((event, i) => <div key={`event-${i}`} className="event">{event.name} - {event.categoryId}</div>)} 
        </div> 
      </div> 
    ) 
  } 
}; 
 
ReactDOM.render( 
  <App />, 
  document.getElementById('root') 
);

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