React refs do not update between render React refs do not update between render reactjs reactjs

React refs do not update between render


Under the section "Caution" in the react documentation about refs https://facebook.github.io/react/docs/more-about-refs.html

"Never access refs inside of any component's render method - or while any component's render method is even running anywhere in the call stack."

Which is exactly what you're doing.

Instead you should store state about the component in this.state or properties of the component in this.props


Remove all your refs and iteration to read the data.

The onchange handler you pass all the way down to the LineItem component should be called and passed only the data that changes. (The single LineItem data)

This is then handled back at the component with the state handling (DocumentContent).

Create an action ShootActions.updateLineItem() that updates the relevant line item in the store, which then emits the change and everything renders again.