Each time we press the button that triggers clicked() as seen in ShoppingList.js on line 26:
render () {
const { name, user, handleDelete, appendTo } = this.props;
return (
<article>
<h3>{ name }</h3>
<button onClick={ handleDelete }> Delete </button>
<button onClick={()=> this.clicked(appendTo, name)}> Select </button>
{
this.state.childVisible ?
<ShowItems user={this.props.user}
appendTo={appendTo}
content={this.props.content}
/>
: <span></span>
}
</article>
);
}
The function toggles the show/hide state of the element.
And I'm not 100% sure of the toggleItems method.... let's look deeper into this...
clicked(key, marketName){
this.setState({childVisible: !this.state.childVisible}); /* We need to only toggle for the specific element with the same id as the item being clicked. */
this.props.toggleItems(key, marketName);
// this.setState({itemsToggled: !this.state.itemsToggled});
}
The end functionality is a bug in the UI that manipulates the previous lists that are opened if multiple lists are selected.
Each time we press the button that triggers
clicked()as seen inShoppingList.json line 26:The function toggles the show/hide state of the element.
And I'm not 100% sure of the toggleItems method.... let's look deeper into this...
The end functionality is a bug in the UI that manipulates the previous lists that are opened if multiple lists are selected.