-1

I have a container containing some html with a <div id="ID"></div>. I have a react stateful component that I want to render in that div using

React.render(<ChildComponent data={this.props.data} />, document.getElementById('ID'))

When I call an action in childcomponent and udate the redux state, the props of the parent container do not update, only the ChildComponent re-renders with old values. Those props get updated when I refresh the page.

What is the solution to this ? Is there any other way to render React component in html so that the props can be updated with new props ?

Piyush
  • 3,015
  • 3
  • 18
  • 31
  • I'm guessing you are doing `ReactDOM.render`, even if you are doing that you won't be passing data as `this.props.data` since you wouldn't have this inside a React class. Try to add a working jsFiddle that we can see – Aftab Khan Jun 21 '17 at 17:43
  • I'm not completely sure but, you don't have to put HTML elements inside the container you are rendering the app, it is like rendering the app in the body: https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375 – Sergio Flores Jun 21 '17 at 17:43
  • Here is my gist : https://gist.github.com/anonymous/d9932ad66e965ef812c0737b304024dd – Piyush Jun 22 '17 at 02:30

1 Answers1

0

Can you share your code for <ChildComponent> and its parent? There are a number of things you might be doing wrong but the thing that stands out is that it looks like you're rendering separately from its parent instead of as a child "prop" of its parent, like so:

<ParentComponent>
    <ChildComponent />
</ParentComponent>

The official docs also have a lot of examples on how to get started: https://facebook.github.io/react/docs/hello-world.html

Hope this helps!

Leo Langinger
  • 125
  • 1
  • 6
  • Indirectly yes. But first see my code here: https://gist.github.com/anonymous/d9932ad66e965ef812c0737b304024dd – Piyush Jun 22 '17 at 02:31