Radio buttons pre-populated with previous repsonse - reactjs

Question

I have a function that builds a matrix-grid style question, where you have multiple questions to the left with radio button responses for each question to the right.
My issue is that, when this function is called more than once (you have more than 1 matrix-grid question), the grid is already pre-populated with the responses from the previous matrix-grid question.
It's worth noting that, in my state the responses from Question1 are unchanged and despite being pre-populated, the state variables for the second question are actually blank until you start clicking
renderFieldlikert(params) {
var count = 0;
let matrixQuestion = params.SubFields.map(function(question, x) {
let questionText = (<li className='left-column'><h4 className='text-left'>{question.Label}</h4></li>);
let radioButtons = params.Choices.map(function(choice, i) {
let val = choice.Score
return(
<li className='animated fadeIn'>
<input onChange={(e) => this.props.handleRadioChange(o.ID, e)} type="radio" name={question.Label} id={++count} key={i} value={val} />
<label htmlFor={count}>{choice.Score}</label>
</li>
)
}.bind(this));
return(
<ul>
{questionText}
{radioButtons}
</ul>
)}.bind(this));
Image 1: User answer's questions
Image 2: Answers from question 1 show up in question 2

Answer 1

Try giving your returned <ul> a unique key so that React can identify that you're trying to render different, unique components. React internally optimizes how it handles the DOM and will re-use HTML elements if it thinks that they are supposed to be the same elements.
An easy way to do this is with Date.now() which will always be unique every time your function returns a new component.
return(
<ul key={Date.now()} >
{questionText}
{radioButtons}
</ul>
)}.bind(this));
However the above won't work if you're calling renderFieldlikert() on every render, causing React to generate a new component every time it renders instead of reusing the same one. key should be unique and generated once before using it in a render method. It would be even better if every param you pass in has some kind of unique identifier and you used that instead.
// Maybe?
return(
<ul key={params.uniqueKey} >
{questionText}
{radioButtons}
</ul>
)}.bind(this));