React es6, Remove item from array, by changing props - reactjs

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
})
},

Answer 1

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!