React component does not update

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.

Uhh.. How do you render your list of questions? Do you have a component for that? — mostruash, Dec 11 '16 at 12:16
@mostruash yes i have a parent component. i fixed it by adding a random key on the selection of component to be loaded. I dont know is it the right approach to do. — Aatif Bandey, Dec 11 '16 at 12:25

score 1 · Answer 1 · answered Dec 11 '16 at 12:46

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.

score 0 · Answer 2 · answered Dec 11 '16 at 13:07

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.

React component does not update

2 Answers2