Re Render Functional Component On Props Change

I am unable to render updated props in functional component. However, I am able to console.log those props perfectly. My Code: class ABC extends someOtherClass { static create(v

Solution 1:

You are using this.props.id instead of props.id in functional component

constHandleComments = props => {
  console.log('props', props);
  return<div>{props.id}</div>;
};

Also you need to render the HandleComments component instead of just returning the functional instance to the onClick event like below or some other manner from someOtherClass

classABCextendssomeOtherClass {
 staticcreate(value) {
    let node = super.create();
    node.setAttribute('style', 'font-size:100%; color: white');
    node.setAttribute('id', Date.now());
    node.onclick = function(e) {
      ReactDOM.render(<HandleCommentsid={e.target.id} />, document.getElementById('root'));
    };
    return node;
  }
}