Delete Item from Array (React-Native + Redux)

Question

I have the checklist with users and when I click on the checkbox user should add to the InputField or delete from InputField, if I check to it again.

For now works only ADD.

import ...

export default class NewEvent extends React.Component {
  constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this);
  }

  onSelect = id => { 
    addMembers(id) }

  findSelectedContacts = (contacts, membersArray) => {
    const newArr = [];
    contacts.forEach(item => {
      if(membersArray.indexOf(item.id.toString()) > -1) {
        newArr.push(` ${item.name}`)
      }
    });
    return newArr;
  }

  render() {
    const { navigation, members, location, contacts } = this.props;
    const membersArray = members ? members.split(',') : [];
    const selectedArray = this.findSelectedContacts(contacts, membersArray)
    const inputFill = selectedArray.join().trim();
    return (

            <InputField
              customStyle={[eventStyles.input]}
              icon="addGuest"
              placeholder="Add guests"
              onGetText={texts => {
                this.handlerChangeText(texts)
              }}
              value={inputFill}
            />
    );
  }
}

Also, I have reducer, which adds guests to input:

import { handleActions } from 'redux-actions';
import * as types from '../actions/actionTypes';

export const initialState = {
  members: '',
};

const addMembers = (members, id) => {
  const res = members ? `${members},${id}` : `${id}`;
  return res;
}

export default handleActions(
  {
    [types.ADD_GUEST]: (state, action) => ({
      ...state,
      members: addMembers(state.members, action.payload),
    }),
  },
  initialState
);

Please advise, how I can change my reducer? I need to add or delete the user from InputFiled if I click on the ONE checkbox.

jevakallio · Accepted Answer · 2017-09-03 12:53:04Z

1

Currently, it appears that you are storing the members list as a comma-separated string. A better option would be to store the list as an actual array, and then convert that to a string when it's needed in that format, e.g. rendering.

The reducer for it might look something like this (trying to follow your existing code style:

export const initialState = {
  // initialState changed to array
  members: [],
};

const addMember = (members, id) => {
  // add id to the end of the list
  return members.concat(id);
}

const removeMember = (members, id) => {
  // return a new list with all values, except the matched id
  return members.filter(memberId => memberId !== id);
}

export default handleActions(
  {
    [types.ADD_GUEST]: (state, action) => ({
      ...state,
      members: addMember(state.members, action.payload),
    }),

    [types.REMOVE_GUEST]: (state, action) => ({
      ...state,
      members: removeMember(state.members, action.payload),
    }),
  },
  initialState
);

And if you then need the list as a string, in your component render() method - or preferrably in your react-redux mapStateToProps selector you can convert it to a string:

memberList = state.members.join(',')

answered Sep 3, 2017 at 12:53

jevakallio

36k4 gold badges109 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bip-bop Over a year ago

As I understood, I need to pass removeMember like props to somewhere, don't I?

jevakallio Over a year ago

Not exactly. You do need to dispatch an action with type types.REMOVE_GUEST and payload of id, and then the reducer will handle calling the removeMember method for you.

bip-bop Over a year ago

I asked, because I used your code and it only add members but don't remove it.

jevakallio Over a year ago

If you are firing an action with type types.REMOVE_GUEST and payload of id, it should work. However, I just guessed that's what the action type might be called - maybe it's called something different, or you haven't defined it.

Collectives™ on Stack Overflow

Delete Item from Array (React-Native + Redux)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related