component doesn't update after state update - reactjs

Question

the following code doesn't update my component.
the state is updated with another function. so I'd assume the component would update aswell.
Entire Class is here.
class QuestionList extends Component
{
constructor(props)
{
super(props);
this.state = {
questions : []
}
this.childHandler = this.childHandler.bind(this);
}
updateData()
{
const get = '/application/questions/'
api.get(get)
.then(response => {
console.log(response);
this.setState({questions : response.data});
})
.catch(err => console.log(err));
}
componentDidMount(){
var tempArray = [];
const get = '/application/questions/'
api.get(get)
.then(response => {
console.log(response);
this.setState({questions : response.data});
})
.catch(err => console.log(err));
}
childHandler( update )
{
const {questions} = this.state;
let tempQs = questions;
const length = questions.length;
var temp = [];
var temp1 = [];
console.log ( tempQs );
for(var i = 0; i < length; i++)
{
if(questions[i].q_id == update[1])//find New
{
temp = [questions[i].q_id,questions[i].question];
for(var x = 0; x < length; x++)//find old
{
if(questions[x].q_id == update[0] && questions[x].q_id != questions[i].q_id )
{
temp1 = [questions[x].q_id,questions[x].question];
break;
}
}
break;
}
}
tempQs[temp[0]-1].question = temp1[1];
tempQs[temp1[0]-1].question = temp[1];
this.setState({questions : tempQs},console.log(questions));
}
render()
{
var { questions } = this.state;
console.log(questions);
var qs;
qs = questions.map(val => {
return(
<QuestionCards q_id={val.q_id} max={questions.length} action={this.childHandler}>{val.question}</QuestionCards>
)
});
return(
<Table hover>
<tbody>
<tr className="title">
<th>Id</th>
<th>Question</th>
<td colspan="3" ><Button color="primary">Add Question</Button></td>
</tr>
{qs}
</tbody>
</Table>
);
}
}
here is the cards component
class QuestionCards extends Component
{
constructor ( props )
{
super(props)
this.state = {
fireModal : false,
modal : false,
q_id : this.props.q_id,
question : this.props.children,
max : this.props.max
}
this.handleClick = this.handleClick.bind(this);
this.handleModal = this.handleModal.bind(this);
this.triggerModal = this.triggerModal.bind(this);
this.moveUp = this.moveUp.bind(this);
this.moveDown = this.moveDown.bind(this);
}
triggerModal ( trig )
{
const {q_id} = this.state;
if (trig)
return (
<QListModal q_id={q_id} trigger={trig} action={this.childHandler}/>
);
}
handleModal ( val )
{
const { fireModal } = this.state;
console.log('fireModel: ' + fireModal)
if( !fireModal )
{
this.setState({
mTarget : val,
fireModal : true ,
update : []
});
}
else
{
this.setState({fireModal:false})
}
}
moveUp ()
{
var tempArray = [];
const { q_id } = this.state;
const dir = 'up';
const get = '/application/move/' + q_id +'/'+ dir;
api.get(get).then(res => {
console.log(res);
this.setState({
update : [res.data.newId,res.data.oldId]
})
return this.props.action(this.state.update);
});
//return this.props.action(this.state.update);
}
moveDown ()
{
var tempArray = [];
const { q_id } = this.state;
const dir = 'down';
const get = '/application/move/' + q_id +'/'+ dir;
api.get(get).then(res => {
this.setState({
update : [res.data.newId,res.data.oldId]})
return this.props.action(this.state.update);
});
//return this.props.action();
}
render()
{
const {
fireModal,
q_id,
question,
max,
update
} = this.state
let ButtonUp;
let ButtonDown;
if( q_id <= 1)
{
ButtonUp = <td></td>
}
else
{
ButtonUp = <td><Button id={q_id} onClick={this.moveUp}>▲</Button></td>
}
if( q_id == max)
{
ButtonDown = <td></td>
}
else
{
ButtonDown = <td><Button id={q_id} onClick={this.moveDown}>▼</Button></td>
}
return(
<tr>
<th>{q_id}</th>
<td>{question}</td>
<td><Button onClick={this.handleModal}>Edit</Button></td>
{ButtonUp}
{ButtonDown}
{this.triggerModal(fireModal)}
</tr>
)
}
}
render()
{
var { questions } = this.state;
var qs = questions.map(val => {
return(
<QuestionCards q_id={val.q_id} max={questions.length} action={this.childHandler}>{val.question}</QuestionCards>
)
});
return(
<Table hover>
<tbody>
{qs}
</tbody>
</Table>
);
}
}
what the app is trying to do is every time the up or down arrow is pressed. it updates it on the page.
For some reason after updating the state it doesn't update the output itself.
though when i console.log the state it self it is updated.
this is my first independent project I'm still learning React/Javascript as a whole.
as you can see the state updates properly. but just doesn't re render anything.
the profiler tool in react-dev-tools outputs nothing rendered. could it be because of the parent component?
Solution
My problem was with the constructor for question cards.
super(props)
this.state = {
fireModal : false,
modal : false,
q_id : this.props.q_id,
question : this.props.children, // This line in particular
max : this.props.max
}
I wasn't updating the state with the new Info.
so i just assign the value of this.props.children to a constant in the render function
this is the updated render for QuestionCards
render()
{
const {
fireModal,
q_id,
max
} = this.state
const question = this.props.children;
let ButtonUp;
let ButtonDown;
if( q_id <= 1)
{
ButtonUp = <td></td>
}
else
{
ButtonUp = <td><Button id={q_id} onClick={this.moveUp}>▲</Button></td>
}
if( q_id == max)
{
ButtonDown = <td></td>
}
else
{
ButtonDown = <td><Button id={q_id} onClick={this.moveDown}>▼</Button></td>
}
return(
<tr>
<th>{q_id}</th>
<td>{question}</td>
<td><Button onClick={this.handleModal}>Edit</Button></td>
{ButtonUp}
{ButtonDown}
{this.triggerModal(fireModal)}
</tr>
)
}
also removed the console logs to declutter the post!
Thank you all for helping me trouble shoot!

Answer 1

Issue
Looks like a state mutation in cardHandler
childHandler( update ) {
const {questions} = this.state;
let tempQs = questions; // <-- saved current state ref to tempQs
...
tempQs[temp[0]-1].question = temp1[1]; // <-- mutated state ref
tempQs[temp1[0]-1].question = temp[1]; // <-- mutated state ref
this.setState({questions : tempQs},console.log(questions)); // <-- saved state ref
}
Solution
Shallow copy questions into new array reference to update. This should allow react's state/props reference test to detect that state is a new object and rerender.
const {questions} = this.state;
let tempQs = [...questions]; // <-- spread existing array into new array