javascript - Re render functional component on props change

Question

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(value) {
    let node = super.create();
    node.setAttribute('style', 'font-size:100%; color: white');
    node.setAttribute('id', Date.now());
    node.onclick = function(e) {
      HandleComments({ id: e.target.id, render: e.target.id });
    };
    return node;
  }
}

HandleComments Component

import React from 'react';

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

export default HandleComments;

Answer 1

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

const HandleComments = 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

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