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;

Yes, you probably are missing something. Without seeing your code though, we have no idea what. — Robin Zigmond, Mar 19 '19 at 11:40
Where is your react component mounted? It looks like you are just calling a function that happens to return JSX — Leon, Mar 19 '19 at 11:49
You can unmount a component and render it again. Not a good method but useful in bad cases. Here it's explanation https://stackoverflow.com/questions/21662153/unmounting-react-js-node — Yusuf Altıparmak, Mar 19 '19 at 11:59
@YusufAltıparmak This is okay for Class Components but I am facing the issue with Functional Components. — reeversedev, Mar 19 '19 at 12:01

Shubham Khatri · Answer 1 · 2019-03-19T11:49:39.853

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;
  }
}

edited Mar 19 '19 at 11:49

answered Mar 19 '19 at 11:45

Shubham Khatri

270,417
55
406
400

Still not able to render the props. – reeversedev Mar 19 '19 at 11:46
@Avanthika OP is not rendering the functional component instead just calling it and hence the render is not happening – Shubham Khatri Mar 19 '19 at 11:50
@Avanthika on console.log, I am able to see my props. – reeversedev Mar 19 '19 at 11:55
@ShubhamKhatri ReactDOM.render won't work since it's not a React Class but rather just a normal class. – reeversedev Mar 19 '19 at 11:56
In such a case its better to not follow the above pattern and simply use JSX to render elements – Shubham Khatri Mar 19 '19 at 12:04

Re render functional component on props change

1 Answers1

Linked