How to delete each row using Reactjs and Redux

Question

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

Leeroy_Wonkledge · Accepted Answer · 2018-01-31 17:47:57Z

3

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>
};

answered Jan 31, 2018 at 17:47

Leeroy_Wonkledge

3512 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mikhail · Accepted Answer · 2018-01-31 17:47:27Z

1

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!
}

answered Jan 31, 2018 at 17:47

Mikhail

9001 gold badge13 silver badges25 bronze badges

7 Comments

Mikhail Over a year ago

@JMR you will also have to bind the generateRows function in the constructor this.generateRows = this.generateRows.bind(this)

R9102 Over a year ago

should i remove this function const DeleteButon = (props) => { and create new function generateRows

Mikhail Over a year ago

Well...I think this method will involve rewriting some of your Components and moving the data around into State. Like I said, I'm not 100% sure which rows you want to remove. It requires setting up your data and row renders in a different way than in your current render method

R9102 Over a year ago

for every row of data there will an delete button..when ever the user clicks on delete button it has to get deleted...it can be random delete selection

Mikhail Over a year ago

My method works for creating a Table/Row from scratch (Just replace <tr> with <div className="row"> if not making a table ) - if you want to delete the rows within your <DynamicDataGrid> component, we would proably need to see the code of that Component itself to see how it generates rows - you are passing down rows={this.props.rowData} to it and it is not clear how that component builds rows and how it parses that data to generate rows - does it take an array of Objects, or an array of HTML to directly render, or how does it work?

|

Collectives™ on Stack Overflow

How to delete each row using Reactjs and Redux

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related