Skip to content

Lets add a conditional in ShoppingList.js to improve UI. #13

@gbenavid

Description

@gbenavid
class ShoppingList extends Component {
  constructor(props){
    super(props);
    this.state = {
      childVisible: false
    }
  }
/* Add conditional for listed items that also belong to the correct store to prevent unwanted items appearing under the wrong merchant */

  onClick(key, marketName){
    this.setState({childVisible: !this.state.childVisible});
    this.props.toggleItems();
  }

  render () {
    const { name, user, handleDelete, appendTo } = this.props;
    return ( 
      <article>
        <h3>{ name }</h3>
        <button onClick={ handleDelete }> Delete </button>
        <button onClick={()=> this.onClick()}> Select </button>
        {
          this.state.childVisible ?
            <ShowItems  user={this.props.user} 
                        appendTo={appendTo}
                        content={this.props.content}
            />
          : <span></span>
        }
      </article>
    );
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions