javascript : Can't remove an element from an array in React using filter. When you click on an item, it should be removed. I use

Home>2021-12-19 22:11

javascript : Can't remove an element from an array in React using filter. When you click on an item, it should be removed. I use

Reduce separately

const defaultState= {
    customers: []
  }
  export const customersReducer= (state= defaultState, action)= &gt;
 {
    switch (action.type) {
      case 'addCustomer':
        return {... state, customers: [... state.customers, action.payload]}
      case 'removeCustomer':
        return {... state, customers: state.customers.filter (customer= &gt;
 customer.id!== action.payload)}
      default:
        return state
    }
  }

Code:

const App= ()= &gt;
 {
  const dispatch= useDispatch ();
  const customers= useSelector (state= &gt;
state.customers.customers)
  const addCustomer= (name)= &gt;
 {
    const customer= {
      name,
      id: Date.now (),
    }
    dispatch ({type: 'addCustomer', payload: customer})
  }
  const removeCustomer= (customer)= &gt;
 {
    dispatch ({type: 'removeCustomer', payload: customer.id})
  }
  return (
    &lt;
div style= {{display: 'flex', justifyContent: 'center', flexDirection: 'column'}} &gt;
      &lt;
div style= {{display: 'flex', justifyContent: 'center', margin: '20px 0'}} &gt;
        &lt;
div &gt;
          &lt;
button onClick= {()= &gt;
addCustomer (prompt ())} &gt;
Add client &lt;
/button &gt;
        &lt;
/div &gt;
      &lt;
/div &gt;
      {customers.length &gt;
 0?
        &lt;
div &gt;
            {customers.map (customer= &gt;
              &lt;
div onClick= {()= &gt;
removeCustomer ()} &gt;
{customer.name} &lt;
/div &gt;
            )}
        &lt;
/div &gt;
        :
        &lt;
div style= {{display: 'flex', justifyContent: 'center'}} &gt;
          No clients
        &lt;
/div &gt;
      }
    &lt;
/div &gt;
  );
};
export default App;

Please clarify your specific problem or provide more detailed information on what exactly you need. As it stands, it is difficult to know exactly what you are asking.

Дух сообщества2021-12-20 13:15:06

Answer # 1

Pass to the function when calling the customer itself

&lt;
div &gt;
   {customers.map (customer= &gt;
      &lt;
div onClick= {()= &gt;
removeCustomer (customer)} &gt;
{customer.name} &lt;
/div &gt;
   )}
&lt;
/div &gt;

Answer # 2

Pass to the function when calling the customer itself

&lt;
div &gt;
   {customers.map (customer= &gt;
      &lt;
div onClick= {()= &gt;
removeCustomer (customer)} &gt;
{customer.name} &lt;
/div &gt;
   )}
&lt;
/div &gt;

TutorialFor

javascript : Can't remove an element from an array in React using filter. When you click on an item, it should be removed. I use