Filtering Data with Buttons in ReactJS

Question

I have a state with a 4 properties. Initially, all of them will be set to false. But, when I will click the button , the particular one will change to true and it all other values will be displayed. I am trying to use filter method but I am unable to do so.

State:

state = {
    hospitals: [
      { id: 'h1', name: 'Apollo Hospital', city: 'Chennai' },
      { id: 'h2', name: 'Fortis Hospital', city: 'New Delhi'},
      { id: 'h3', name: 'Tata Memorial Hospital', city: 'Mumbai'},
      { id: 'h4', name: 'Lilavati Hospital', city: 'Pune',}
    ],
};

where are you setting them to false?

SakoBu
– SakoBu

2020-07-28 21:04:33 +00:00
Commented Jul 28, 2020 at 21:04 — SakoBu
– SakoBu, Commented Jul 28, 2020 at 21:04

Yevhen Horbunkov · Accepted Answer · 2020-07-28 21:22:28Z

I'm not entirely sure whether I grasped properly the expected behavior.. Are you trying to implement something, like this?

const { useState } = React,
      { render } = ReactDOM,
      rootNode = document.getElementById('root')
      
const data = {
    hospitals: [
      { id: 'h1', name: 'Apollo Hospital', city: 'Chennai' },
      { id: 'h2', name: 'Fortis Hospital', city: 'New Delhi'},
      { id: 'h3', name: 'Tata Memorial Hospital', city: 'Mumbai'},
      { id: 'h4', name: 'Lilavati Hospital', city: 'Pune',}
    ],
}

const App = () => {
  const [filters, setFilters] = useState(
          Object.assign(
            {},
            ...data.hospitals.map(({city}) => ({[city]: false}))
          )
        ),
        onFilter = ({target:{value}}) =>
          setFilters({
            ...filters,
            [value]: !filters[value]
          })
       
   return(
    <div>
      {
        Object.keys(filters).map(button => (
          <input 
            type="button"
            value={button} 
            key={button}
            onClick={onFilter}
            className={filters[button] ? 'activeButton' : ''}
          />
        ))
      }
      <ul>
        {
          data.hospitals.map(({id,name,city}) => 
            (!Object.values(filters).some(Boolean) || filters[city]) && (
            <li key={id}>{name} ({city})</li>
          ))
        }
      </ul>
    </div>
   )    
}

render (
  <App />,
  rootNode
)

.activeButton {
  background-color: orange;
  color: #fff;
}

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

Collectives™ on Stack Overflow

Filtering Data with Buttons in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related