React es6, Remove item from array, by changing props

Question

I’m new to React and right now I’m working on a project where a user should be able to choose a base ingredient, and it gets added to an array. By clicking on another base ingredient the first one should be removed from the array. Right now the chosen ingredient only removes when clicking on the same one.

I want it to be removed when clicking on another one. Please help :)

import React from 'react';
import Actions from '../../../actions/actions';
import BaseIngredientButton from './BaseIngredientButton';

class BaseIngredientItem extends React.Component {
    _OnClick (props) {

        if (this.props.isChosen) {
            Actions.removeItem(this.props.baseIngredient);
        } else {
            Actions.addItem(this.props.baseIngredient)
            Actions.setBaseIngredient( this.props.baseIngredient );
        }

        console.log(this.props.isChosen)

    }

    render () {
       return (
           <BaseIngredientButton isChosen={this.props.isChosen} onClick={ this._OnClick.bind(this)} txt={ this.props.baseIngredient.name } />
       )
    }
}

BaseIngredientItem.propTypes = { 
    baseIngredient: React.PropTypes.object.isRequired,
    isChosen: React.PropTypes.bool
}

export default BaseIngredientItem;

here is my store.js

let _cart = [];

const _removeItem = ( item ) => {
  _cart.splice( _cart.findIndex( i => i === item ), 1 );
  console.log("Ingredients in cart after removal", _cart);
};

const _getItemInCart = ( item ) => {
  return _cart.find( ingredient => ingredient.name === item.name )
};

const _addItem = ( item ) => {
  if (!_getItemInCart( item )) {
    _cart.push(item);
  } 
  console.log("Ingredients in cart after addition", _cart);
};

let _currentBaseIngredient = {};

const _setCurrentBaseIngredient = ( baseIngredient ) => {
  _currentBaseIngredient = baseIngredient
};

here is my action.js

 addItem( item ){
    dispatch({
       actionType: AppConstants.ADD_ITEM, 
       item
     })
  },
  removeItem( item ){
    dispatch({
      actionType: AppConstants.REMOVE_ITEM, 
      item
    })
  },
  setBaseIngredient( baseIngredient ){
    dispatch({
      actionType: AppConstants.SET_BASE_INGREDIENT, 
      baseIngredient
    })
  },

Assuming you are using the Flux pattern, this seems like something that would be managed in the Store. Can you show your Actions object and the Store it communicates with? — Bobby Matson
– Bobby Matson, Commented Feb 20, 2016 at 13:30

Bobby Matson · Accepted Answer · 2016-02-20 13:58:42Z

Your BaseIngredientItem component has no knowledge of whether there is another base ingredient in the array, so as I mentioned in the comment, this would definitely be something to inspect at the Store level.

Is there any way to determine whether an item is of type base? If there is, you can check for its presence in your addItem function:

(please don't mind some of the psuedo-code)

const _addItem = ( item ) => {
  if (item is a base ingredient)
    removeCurrentBaseIngredient()

  if (!_getItemInCart( item )) {
      _cart.push(item);
  } 
  console.log("Ingredients in cart after addition", _cart);
};

const removeCurrentBaseIngredient = () => {
  _removeItem( _currentBaseIngredient );
};

Since the store already knows about the _currentBaseIngredient, you should be able to look it up pretty easily and call _removeItem to remove it from the _cart.

I hope that helps!

Collectives™ on Stack Overflow

React es6, Remove item from array, by changing props

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