coryhouse / pluralsight-redux-starter

Completed Dev Environment for "Building Applications with React and Redux" on Pluralsight
https://app.pluralsight.com/library/courses/react-redux-react-router-es6/
1.27k stars 912 forks source link

delete functionality with starter kit #98

Closed BHARAT703 closed 6 years ago

BHARAT703 commented 6 years ago

Hi @coryhouse and team.

I am creating CRUD functionality for product, and from plural sight course I have done most of the part but we don't have delete functionality in course, so I am working on it and I stucked at one point where I don't know what to do. and so need your suggestions.

first thing, I am rendering ProductList from ProductPage like this.

deleteProduct(event) { debugger; }

<ProductList products={products} onRemove={this.deleteProduct} deleting={false} />

Now, from ProductList, I am calling ProductListRow like this.

<tbody> {products.map(product => ( <ProductListRow key={product.id} product={product} onRemove={onRemove} deleting={deleting} /> ))} </tbody>

Delete input in ProductListRow

<input type="submit" disabled={deleting} value={deleting ? "Deleting..." : "Delete"} className="btn btn-danger" style={{ margin: "5px" }} onClick={onRemove} />

Now, my first issue is that how to pass product Id to that onRemove/deleteProduct function when deleting any entity?

second, right now I have ManageProductPage and ProductPage, and my logic for Create/Update is in ManageProductPage (as we have in course), I tried to add logic for delete on the ManageProductPage but I could not find way to communicate between ManageProductPage and ProductListRow, so I have done my code in ProductPage. is it a proper way?

coryhouse commented 6 years ago

To pass a value to onRemove, you can use an arrow function: onClick={() => onRemove(id)}

Regarding delete, I agree, I'd suggest implementing it on the Product page. That seems most natural anyway.