function ProductItem({ item }) {
  const [isEditPopupOpen, setEditPopup] = useState(false);
  const [isDeletePopupOpen, setDeletePopup] = useState(false);

  const toggleEditPopup = () => {
    setEditPopup(!isEditPopupOpen);
  };
  const toggleDeletePopup = () => {
    setDeletePopup(!isDeletePopupOpen);
  };
  function SelectivePopup() {
    if (isEditPopupOpen) {
      return <EditProduct data={item} handleClose={toggleEditPopup} />;
    } else if (isDeletePopupOpen) {
      return <DeleteProduct data={item} handleClose={toggleDeletePopup} />;
    } else {
      return <React.Fragment />;
    }
  }
  return (
    <div className="card margin-8">
      <div className="card-container">
        <div className="column">
          <div className="row space-between">
            <div className="row">
              <p className="self-center card-title">{item.productName}</p>
              {!item.category || !item.size ? (
                <i className="self-center margin-x-2 yellow fa fa-warning" />
              ) : (
                <React.Fragment />
              )}
            </div>
            <div className="row align-center">
              <div className="margin-8 activity" onClick={setEditPopup}>
                <i className="fa fa-edit"></i>
              </div>
              <div className="margin-8 danger" onClick={setDeletePopup}>
                <i className="fa fa-trash-o"></i>
              </div>
            </div>
          </div>
          <div className="row space-between">
            <p>{item.stock}</p>
            <p>{item.category}</p>
          </div>
          <div className="row space-between">
            <p>{item.price} rs.</p>
            <p>{item.size}</p>
          </div>
          <p>{item.description}</p>
        </div>
      </div>
      <SelectivePopup />
      <ToastsContainer store={ToastsStore} />
    </div>
  );
}
/**
 * Created by Piyush on Sat Nov 21 2020 13:11:02 GMT+0530 (India Standard Time)
 * Listing of all products
 * Updated by Piyush on Sat Nov 21 2020 13:11:02 GMT+0530 (India Standard Time)
 * Listing of all products
 */
Created by Piyush on Sat Nov 21 2020 13:11:02 GMT+0530 (India Standard Time)
Listing of all products
Updated by Piyush on Sat Nov 21 2020 13:11:02 GMT+0530 (India Standard Time)
Listing of all products
Created by Piyush on Sat Nov 21 2020 13 : 11 : 02 GMT + 0530 ( India Standard Time ) Listing of all products Updated by Piyush on Sat Nov 21 2020 13 : 11 : 02 GMT + 0530 ( India Standard Time ) Listing of all products
function ProductItem({ item }) {
  const [isEditPopupOpen, setEditPopup] = useState(false);
  const [isDeletePopupOpen, setDeletePopup] = useState(false);
  const toggleEditPopup = () => {
    setEditPopup(!isEditPopupOpen);
  };
  const toggleDeletePopup = () => {
    setDeletePopup(!isDeletePopupOpen);
  };
  function SelectivePopup() {
    if (isEditPopupOpen) {
      return <EditProduct data={item} handleClose={toggleEditPopup} />;
    } else if (isDeletePopupOpen) {
      return <DeleteProduct data={item} handleClose={toggleDeletePopup} />;
    } else {
      return <React.Fragment />;
    }
  }
  return (
    <div className="card margin-8">
      <div className="card-container">
        <div className="column">
          <div className="row space-between">
            <div className="row">
              <p className="self-center card-title">{item.productName}</p>
              {!item.category || !item.size ? (
                <i className="self-center margin-x-2 yellow fa fa-warning" />
              ) : (
                <React.Fragment />
              )}
            </div>
            <div className="row align-center">
              <div className="margin-8 activity" onClick={setEditPopup}>
                <i className="fa fa-edit"></i>
              </div>
              <div className="margin-8 danger" onClick={setDeletePopup}>
                <i className="fa fa-trash-o"></i>
              </div>
            </div>
          </div>
          <div className="row space-between">
            <p>{item.stock}</p>
            <p>{item.category}</p>
          </div>
          <div className="row space-between">
            <p>{item.price} rs.</p>
            <p>{item.size}</p>
          </div>
          <p>{item.description}</p>
        </div>
      </div>
      <SelectivePopup />
      <ToastsContainer store={ToastsStore} />
    </div>
  );
}
function ProductItem ( { item } ) { const [ isEditPopupOpen , setEditPopup ] = useState ( false ) ; const [ isDeletePopupOpen , setDeletePopup ] = useState ( false ) ; const toggleEditPopup = ( ) => { setEditPopup ( ! isEditPopupOpen ) ; } ; const toggleDeletePopup = ( ) => { setDeletePopup ( ! isDeletePopupOpen ) ; } ; function SelectivePopup ( ) { if ( isEditPopupOpen ) { return < EditProduct data = { item } handleClose = { toggleEditPopup } / > ; } else if ( isDeletePopupOpen ) { return < DeleteProduct data = { item } handleClose = { toggleDeletePopup } / > ; } else { return < React . Fragment / > ; } } return ( < div className = "card margin-8" > < div className = "card-container" > < div className = "column" > < div className = "row space-between" > < div className = "row" > < p className = "self-center card-title" > { item . productName } < / p > { ! item . category || ! item . size ? ( < i className = "self-center margin-x-2 yellow fa fa-warning" / > ) : ( < React . Fragment / > ) } < / div > < div className = "row align-center" > < div className = "margin-8 activity" onClick = { setEditPopup } > < i className = "fa fa-edit" > < / i > < / div > < div className = "margin-8 danger" onClick = { setDeletePopup } > < i className = "fa fa-trash-o" > < / i > < / div > < / div > < / div > < div className = "row space-between" > < p > { item . stock } < / p > < p > { item . category } < / p > < / div > < div className = "row space-between" > < p > { item . price }  rs. < / p > < p > { item . size } < / p > < / div > < p > { item . description } < / p > < / div > < / div > < SelectivePopup / > < ToastsContainer store = { ToastsStore } / > < / div > ) ; }
Created by Piyush on Sat Nov 21 2020 13:11:02 GMT+0530 (India Standard Time)
 Listing of all products
 Updated by Piyush on Sat Nov 21 2020 13:11:02 GMT+0530 (India Standard Time)
 Listing of all products
Created by Piyush on Sat Nov 21 2020 13 : 11 : 02 GMT + 0530 ( India Standard Time ) Listing of all products Updated by Piyush on Sat Nov 21 2020 13 : 11 : 02 GMT + 0530 ( India Standard Time ) Listing of all products