React component does not update - jquery-ui

Question

I am using React and Redux for my application. I have a dynamic form when i drag my question of same type my component position does not update.
For dragging i am using JqueryUI Sortable
My question object:
var questions : [
{"name" : "Question Title", "title" : "Question Title", "type" : "text"},
{"name" : "Question Title", "title" : "Question Title", "type" : "text"}
]
React Component
class SingleTextQuestion extends React.Component{
constructor(props){
super(props)
}
componentDidMount(){
let draggableFunction = new utilityFunction();
draggableFunction.addDraggableFeature('divQuestion_container');
}
render(){
//create span or textbox based upon edit mode
let element = Symbol();
element = (<QuestionTitle questionNumber={this.props.questionNumber} data={this.props.data} key={this.props.key} />)
return (
<div id={"div_"+this.props.questionNumber} className="div_commonId" key={this.props.key}>
<div className='icons_parent'>
<DragIcon />
<DeleteButon questionNumber={this.props.questionNumber} />
</div>
<div id={"q_no_title_"+this.props.questionNumber} className="q_no_title_class">
<QuestionNumber questionNumber={this.props.questionNumber}/>
<div id={"title_q"+this.props.questionNumber} className="question-title">
{element}
</div>
</div>
<div id={"typeDiv_"+this.props.questionNumber}>
<input id={"optionTypeElem_0_"+this.props.questionNumber}/>
</div>
</div>
)
}
}
Question Title Component
class QuestionTitle extends React.Component{
constructor(props){
super(props)
this.showTextBox = this.showTextBox.bind(this)
}
showTextBox(content, id, type, choiceIndex){
if(type != 'image'){
this.props.showTextBox(content, id, type, choiceIndex);
}
}
render(){
return(
<span id={"title_"+this.props.questionNumber}
onClick={this.showTextBox.bind(this, this.props.data.title ,
'title_'+this.props.questionNumber, 'question_title', null)} >
{this.props.data.title}
</span>
)
}
}
Now if i change the text of question title, the state gets updated and title is changed. And when i drag the question from 2 to 1. I update my question array too.
var questions : [
{"name" : "Question Title", "title" : "Question Title Changed", "type" : "text"},
{"name" : "Question Title", "title" : "Question Title", "type" : "text"}
]
Question 2 remains at the same position where it was, this happend if i drag question of same type eg: text. The type of question is defined in the question object.

Answer 1

For any list you are rendering, each list item should have a way to identify it (similar to how data is stored in databases, right?). So you can put an id property to each question (doesn't matter how you generate them as long as they are unique for each question). Then you can use that property as a key when rendering them using react.

Answer 2

By adding a key to the component the problem is solved.
When creating an object i appended a key to my data
var questions : [
{"name" : "Question Title", "title" : "Question Title", "type" : "text", "key_rand" : 123},
{"name" : "Question Title", "title" : "Question Title", "type" : "text", "key_rand" : 223}
]
So whenever i update the array index after dragging the key_rand is also changed which renders the component.