data is not coming outside the function in reactjs - reactjs

Question

How to bring the pushed array data outside the function,Every thing is
working fine in click function.But when Im trying to print this outside of
the function console.log(this.state.selectedSchedule[0].storeName) , It is
throwing the error:
Cannot read property 'storeName' of undefined.
Code:
this.state = {
selectedSchedule:[]
};
click(e){
console.log('e',e);
document.getElementById("detailView").style.display="block";
this.state.selectedSchedule=[];
for(let i=0;i<this.scheduless.length;i++){
if(this.scheduless[i].scheduleId === e){
this.state.selectedSchedule.push(this.scheduless[i]);
break;
}
}
console.log('cheudkl',this.state.selectedSchedule);
this.setState=({
selectedSchedule:this.state.selectedSchedule
});
console.log(this.state.selectedSchedule[0]);
console.log(this.state.selectedSchedule[0].storeName) //printing
};
//html render
render(){
console.log(this.state.selectedSchedule[0].storeName) // here it's throwing me the error(not printing)
}

Answer 1

Reason is, initial value of this.state.selectedSchedule is [] and during initial rendering you are trying to get the storeName of 0th items, and clear at that time 0th time doesn't exist so
this.state.selectedSchedule[0] ===> undefined
And you are trying to get the value from undefined that's why it is throwing the error. Simply put the check on length before printing the values.
Like this:
render(){
// now it will print the values once some item will be added
if(this.state.selectedSchedule.length)
console.log(this.state.selectedSchedule[0].storeName);
return (....)
}
Another issue is in the way you are updating the state value.
Changes:
1- Never mutate the state value directly, Treat this.state as if it were immutable.
2- setState is a function so we need to call it this.setState({}).
write it like this:
click(e){
document.getElementById("detailView").style.display="block";
let arr = [];
arr = this.scheduless.filter(el => el.scheduleId === e);
this.setState({
selectedSchedule: arr
});
};

Answer 2

You should not mutate the state, push is mutating the array, and you are re assigning the state object in the click function this.state = ....
Instead, use the builtin setState method of react to update it:
this.setState({key: value});
As for arrays you can add items with the ES6 spread operator without mutating it:
const nextState = [...this.state.selectedSchedule, newValue];
this.setState({selectedSchedule: nextState });
EDIT
As Mayank Shukla mentioned, in addition to this solution you should check to see if the length of your array is bigger then 0:
this.state.selectedSchedule.length > 0 && console.log(this.state.selectedSchedule[0].storeName);
In the first render call this array is empty hence its length is 0.

Answer 3

This is not correct way of updating the state
this.setState=({
selectedSchedule:this.state.selectedSchedule
});
You need to edit this as :
if(this.scheduless[i].scheduleId === e){
this.setState({selectedSchedule:[...this.state.selectedSchedule, this.scheduless[i]]});
break;
}
You need to set the state only then the render function will be called again and your changes to the state variable will be visible.

Answer 4

You should never mutate the state (changing the contents of this.state) directly.
That is, instead of assigning an empty array to part of the state and then push every item, create a new array:
const selectedSchedule = this.scheduless.filter(schedule => schedule.scheduleId === e)
this.setState({selectedSchedule});