How to save my userData when click on 'Edit' button in a table row in reactjs

Question

I have created a table with UserInformations and in each row I have added 'edit' and 'delete' button. When the Edit button is on Editable mode then it changes to InputText field and I can update the names. In Rows.jsx file I have created a function call 'onSaveStopEditing' and here I have setState the new User Data which is coming from state to variable call 'UsersData'. But now I need to send this state data as 'callBack(data)' function to parents ( which is table_view.jsx) and then update/overwrite it to the original data. I have tried several ways to send the data to parent via callback function but nothing seem to work for me. Also tried to check in Internet but haven't got the answer I am looking for. Any help from you will be much Appreciated ! Thanks in Advance.

My Code link: https://codesandbox.io/s/edit-delete-inreact-dec2019-8hslp

adamz4008 · Accepted Answer · 2019-12-07 00:46:57Z

1

It looks like this.state[name] should be this.state.usersData[name] (line 26)
Line 50 should be removed because it's changing shape of the state.
What ways have you tried to pass the callback? It looks like you have

          {data.map(item => {
            console.log("Data-item", item);
            return <Rows item={item} />;
          })}

Have you tried just passing the callback as props like:

          {data.map(item => {
            console.log("Data-item", item);
            return <Rows callback={someFn} item={item} />;
          })}

And then from row:

props.callback(whateverDataToSend)

answered Dec 7, 2019 at 0:46

adamz4008

6504 silver badges10 bronze badges

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

3 Comments

Ayesha Over a year ago

Thanks for your Response, Wil try and let you know if it works.

Ayesha Over a year ago

I did follow your instruction and now I am getting the new user data ( as JSon strings in my Alert box now the problem is how do I set them in my Table. Thanks in Advance! Here is the code: codesandbox.io/s/edit-delete-inreact-dec2019-8hslp

adamz4008 Over a year ago

@Ayesha they appear to be in the table, on code sandbox, what is the issue?

Collectives™ on Stack Overflow

How to save my userData when click on 'Edit' button in a table row in reactjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related