Checkbox not changing check attribute after state was changed - reactjs

Question

Here is a some parts of code I am using:
class FileItem extends Component {
constructor(props) {
super(props);
// Initial state
this.state = {
hover: false,
checked: false
};
this.pickFile = this.pickFile.bind(this);
}
pickFile(e){
e.stopPropagation();
this.state.checked ? this.props.removeSelectedPaths(this.props.path) : this.props.addSelectedPaths(this.props.path);
}
//set the checked status for the checkboxes if file\folder are picked
componentWillReceiveProps(nextProps){
this.setState({checked: nextProps.selectedPaths.indexOf(this.props.path) != -1 });
}
render(){
return(
<div className='select-mode'><input id='files-select' type='checkbox' checked={this.state.checked} onClick={this.pickFile}/></div>
)
}
How this should work:
When you pick a file it should set the checked status of its checkbox. And when you use slect all files checkbox( it is not in code here) it pushes all paths to the redux state in the selectedPAths array and all files should have checked checkboxes as they are selected.
Components structure:
Files - container conencted to the redux state. Send props to FileList
FileList - dumb component wrapper for each FileItem. Sending props to FileItem.
FileItem - component which renders row for specific file
The problem:
The problem is when I use Select All files functionality the checkbox for individual file not updating the UI to show the check mark on checkbox. While picking file by file is working fine and checkbox changes to checked(but same logic is used to see if it should be checked).
Weird facts:
When I do
console.log(this.state.checked) in render it shows me that state is
true. So it should change checkbox to checked but not.
I have a similar logic for the Select All files checkbox ( it uses componentWillReceiveProps method to check if all files was selected and change the checked status) and it is working just fine.
You can reveal that the checkbox checked after you picked all files just hovering it over(which triggers on mouse enter event and changes the state which leads to re rendering). I have a feeling like a render is getting lost after state changed but the weird fact 1 tells opposite thing as we have true in state but not checked checkbox in UI.

Answer 1

Sometimes the component needs a key, usually when using lists. this is useful for detecting changes. Try this:
<FileItem key={file.index.toString() + file.isChecked} path={filepath} checked={file.isChecked} />
We say to react that there was a change. To re-render.
Suggest:
You must pass the checked parameter from the parent if you want to handle the status of all the items
files.map (file =>
<fileItem key={file.key} path={filepath} checked={AllChecked} />
and at FileItem:
class FileItem extends Component {
constructor(props) {
super(props);
// Initial state
this.state = {
hover: false,
checked: props.checked// <= here
};
this.pickFile = this.pickFile.bind(this);
}