CODEWITHSUNDEEP
reactjsreact-redux
R9102
R9102

Reputation: 727

How to delete each row using Reactjs and Redux

Can any one help me on these code below

i want to add delete functionality in which each row has delete option on click of delete[x] button i need to delete the respected rows on refresh deleted data should not be displayed.

here is my code 

const DeleteButon = (props) => {
return (
 <div>
   <button>X</button>
 </div>
);
};
class SavedCrosstabs extends Component {

static getSavedCrosstabColumns() {
 return [
   { key: 'title', name: 'Name', sortable: true },
   { key: 'lastModified', sortKey: 'lastModifiedSortable', name: 'Updated', sortable: true },
   { key: 'delete', name: '', width: 35, resizable: false, formatter: DeleteButon, sortable: true },
 ];
 }

 constructor(props) {
 super(props);
 }
**complete code is not pasted**
 }

render() {
 return (
   <div>
     <div className="row">
       <div className="large-12">
         <DynamicDataGrid
           ref={node => (this.savedCrosstabGrid = node)}
           gridCategory="SaveCrosstabGrid"
           className="saved-crosstab-grid saved-crosstab-width"
           rows={this.props.rowData}
           columns={this.constructor.getSavedCrosstabColumns()}
           rowSelectionType="Single"
           isCellSelectable
           minimunRows={5}
         />
       </div>
     </div>
     <div className="row">
       <div className="row-margin-top-10px">
         <div className="large-3 float-right text-right">
           <GenericButton name="Load" btnStyle="button load-btn" onBtnClick={() => this.handleLoadCrosstab()} />
         </div>
 }

Waiting for some help very new to react js

Upvotes: 1

Views: 1703

Answers (2)

Leeroy_Wonkledge
Leeroy_Wonkledge

Reputation: 351

you should rewrite you stateless Component deleteButton, and provide him two props : a function to delete a row, and the id of the row.

const deleteButton = (props) => {
    return(
        <button onClick= { () => props.removeRow(props.id)} x </button>
};

Upvotes: 3

Mikhail
Mikhail

Reputation: 900

It's difficult to tell which Rows you want to delete - the ones being generated in <DynamicDataGrid />, or your <div className="row">?

If you want to delete the ones within DynamicDataGrid - you can see that they are built by {this.props.rowData}. That means that you need to make a method to pull items out of that rowData within the Component that controls that information and passes it down.

My method to generally handle this situation is like this:

Place all of the data which you need to make a row with into Redux State or Local Component State.

Have a generateRows() function that looks like this:

return this.state.rowData.map(item => return (
  <tr key={item._id}> // you can also use item index
      {item.name}
  </tr>
  <button 
     onClick=this.deleteRow.bind(this, item._id)> // Or index
        Delete
  </button>))

Within your Component's Render Method, generate your rows:

render() {
  return(
   {this.state.rowData && this.generateRows}
  )
}

Notice that we bound a deleteRow function to a button that appears next to each row. We also passed in the item.key of each item that we got

deleteRow(item_id) {
 ... do something that removes the item from the database
 ... if you passed in the index instead of the _id, you need to pull that item out of the array that built your rows in the first place, update state with setState, and your rows will be updated - they are generated by mapping your array of data, so you must pull the data to be deleted out!
}

Upvotes: 1

Related Questions