ReactJS : Manipulating State doesn't render child components properly - reactjs

Question

I have three Components "MyApp", "Candidate" and "Courses" and the data is passed from MyApp to Courses.
The data is as such
var data = [{
name : "azhar",
courses : ["Compilers", "Algorithms", "Data Structures"]
}, {
name : "Jenny",
courses : ["Design", "UX"]
}];
And the ReactComponents are rendered as such below :
<MyApp>
<Candidate>
<Courses>
<Courses>
<Courses>
</Candidate>
</MyApp>
Problem : There is a button to add a new Candidate, When clicked I add new Candidate to the state of MyApp. When clicked I see Child components do not render proper data.
Added JSFiddle : https://jsfiddle.net/69z2wepo/8587/
Really hoping someone gives a good explanation, because this is a simple use case.
Thanks

Answer 1

When you create an array of JSX elements like you do with this.state.data.map() you should always include a key attribute that is unique for that position in the array. Note that it shouldn't be something that can change like the index in the array, or the name of the candidate (since there can be duplicates).
If you add an id property on your candidate objects, and create a new id when you add a candidate, it should work: https://jsfiddle.net/qzy3sr6w/2/
Here's a good explanation: http://blog.arkency.com/2014/10/react-dot-js-and-dynamic-children-why-the-keys-are-important/
The TL;DR of that post is that the reason it works for push but not with unshift is because if you don't specify key, React will use the index of the array as key (not exactly true, but close enough). And since you're adding to the beginning of the array, it will use the index 0 which it previously used for another component, meaning that the new first element will get the second elements courses.

Answer 2

I don't think it is a good idea to use react.state directly, as you are doing here:
this.state.data.unshift({
name : "Alice",
courses : [] // No courses for her.
});
Better use additional variable like this:
var candidates = this.state.data;
candidates.push({
name : "Alice",
courses : [] // No courses for her.
});
this.setState({
data : candidates
});
Here is a JSFiidle: https://jsfiddle.net/69z2wepo/8597/