Rich
Rich

Reputation: 185

Getting Cannot set property of undefined Reactjs

I am new to react and I need your help.

I have shared a sandbox link, In that everything works perfectly. But when we add couple new row(by clicking + at rightmost columns of the row) then if we remove some row(by clicking - at rightmost columns of the row) and then again add a new row then edit that row cell I am getting Cannot set property error. I know I have to do some changes in the handleDelete function but not getting what exactly to do. So is anyone experts here, please help me out. And regarding Icon except the last row every other row should have - icon.

Thank you. Comment if you need any clarification.

Sandbox link: https://codesandbox.io/s/suspicious-microservice-qd3ku?file=/index.js

Upvotes: 0

Views: 63

Answers (1)

Evgeny Klimenchenko
Evgeny Klimenchenko

Reputation: 1194

render method actually passes third argument which is actually an id of your component, in your case you don't recalculate the id and that is why your dataSource[key] tries to access key that doesn't exist in dataSource anymore.

render: (text, record, id) => (
            <Input
              {/* ... */}
              onChange={e => this.onChange(e, id)}
            />
          )

Here I updated your codesandbox https://codesandbox.io/s/angry-proskuriakova-6f2u0?file=/index.js:1095-1109

Please let me know if you have any questions.

Upvotes: 2

Related Questions