I've created a JSfiddle
In this fiddle, initially a list of checkboxes is rendered based on the
Because React's diff algorithm is smart. The conditions to rerender a new component are:
Here's a working example: http://jsfiddle.net/lustoykov/ufLyy3vh/
The thing is - neither condition to rerender your
input element is satisfied, so React really reuses the old
input. What I've done is to generate a new
key for every
input element on each rerender. React assumes this is a new element because the
key changes and the
input gets rerendered with the correct
Math.random() is necessary in order to make sure you generate different keys, it's like: Hey, React, this element has changed - please rerender it.
However, I would argue against this approach with different keys, because it is against React's philosophy. Why would you use React if you rerender the same element every single time? That's the core of React - not to rerender when the component is the same. Instead, you should use onChange handler to update only the values of your inputs without explicitly rerendering the whole input component.
Have a look how to work with React forms.