Parent State is not being updated when trying to change the parent state from child. (passing a handler as prop from parent to child)

Question

I know that to change the state of a parent from child we need to pass a handler from parent to child. I am trying to change the state of a parent from child but for some reason the state of parent is not updating. Here is the below code

https://codesandbox.io/s/hungry-raman-6jiwz?fontsize=14 .

Basically when I click on each name in the table, https://ant.design/components/drawer/ has to pop up if the corresponding status is 'Draft' else just the name. After the drawer is popped up, if I close the drawer then I am trying to change the state of the parent with

id:''
visible:false

for the drawer to be closed, but for some reason the state of parent is not being updated and for this reason after closing the drawer table is showing the name to be empty.

My requirement is to show the name the table after the drawer is closed.

Any help would be appreciated...

Answer 1

Your turnery opperator is inncorrect

Change line the first entry in the column array to this

{
  title: "Name",
  dataIndex: "name",
  key: "name",
  render: (text, i) => (
    <a
       onClick={() => {
         this.setState({ id: i.key });
       }}
    >
     {this.state.id == i.key && i.status == "Draft" && <Test reset={this.reset} text={text} />}
     {text}
    </a>
  )
},

You had the text variable or the popup but you need the text variable and the popup.

So instead of boolean? truthy value: falsey value boolean? truthy value: falsey value

You need only the truthy boolean && truthy value