So I’ve basically finished FCC’s RecipeBox using Redux
The only thing I am having trouble is to keep track of the panel’s collapse state.
In other words, every time I change the app’s state (whether from adding, deleting, or editing a recipe), it re-renders the page and every panel uncollapse it.
I’ve taken look at the React-Bootstrap Document but I cannot figure it out.
My current code does not work when applying a state for each recipe items
src/containers/recipebox
class RecipeBox extends Component {
constructor(props){
super(props);
this.state = {open: false}
this.renderRecipeList = this.renderRecipeList.bind(this)
this.handleRecipeNameChange = this.handleRecipeNameChange.bind(this)
this.handleUserIngredientsChange = this.handleUserIngredientsChange.bind(this)
}
handleRecipeNameChange(event){
this.setState({recipeName: event.target.value})
}
handleUserIngredientsChange(event){
this.setState({userIngredients: event.target.value})
}
renderRecipeList(recipeItem, index){
const recipe = recipeItem.recipe;
const ingredients = recipeItem.ingredients;
const recipeID = recipeItem.id;
const id = shortid.generate();
return(
<div key={id}>
<Panel
collapsible
onClick={ ()=> this.setState({ open: !this.state.open })}
eventKey={index}
header={<h3>{recipe}</h3>}>
<ListGroup >
<ListGroupItem header="Ingredients"></ListGroupItem>
{ingredients.map(function(ingredient,index){
return <ListGroupItem key={index}>{ingredient}</ListGroupItem>;
})}
<ListGroupItem>
<Button
onClick={() => this.props.deleteRecipe(recipeItem)}
bsStyle="danger">Delete
</Button>
<Edit
recipeName={recipe}
userIngredients={ingredients}
recipeID={recipeID}
/>
</ListGroupItem>
</ListGroup>
</Panel>
</div>
)
}
render(){
const self = this;
return(
<div className="container">
<div className='panel-group'>
{this.props.recipeList.map(self.renderRecipeList)}
</div>
</div>
)
}
}
function mapStateToProps(state) {
return {
recipeList : state.recipeState
};
}
function mapDispatchToProps(dispatch){
return bindActionCreators({deleteRecipe : deleteRecipe, editRecipe : editRecipe}, dispatch)
}
export default connect(mapStateToProps,mapDispatchToProps)(RecipeBox);