Child component state not being update - reactjs

Question

This is my first week into React. I'm finding the implementation of trickle down state to be elusive.
What I would like to happen: When the parent container receives a message from the socket I want the state change of the parent to trickle down to each of the child elements.
What is currently happening: With the code below all the components render to the screen, the message is received, but the child elements do not register any type of update.
**Update: Everything works fine if I don't loop the ProgressBlocks into an array and then place that array in the render tree with {this.state.blocks}. This is unfortunate since it's not dynamic but at least there's progress.
Parent Container
class InstanceContainer extends React.Component {
constructor(props) {
super(props)
this.state = {
id: ids.pop(),
callInProgress: false,
callsCompleted: 0,
eventProgress: 0,
blocks: []
}
}
componentWillMount() {
const lightColors = ['white', 'white', 'cyan', 'green', 'green', 'yellow', 'orange', 'magenta', 'red']
for (let i = 0; i < 10; i++) {
this.state.blocks.push(<ProgressBlock bgColor={lightColors[i]} eventPlace={i} eventProgress={this.state.eventProgress} />)
}
}
render() {
socket.on(this.state.id, (msg) => {
console.log(msg)
console.log('RECEIVED MESSAGE')
console.log(this.state.id)
if (msg) {
this.setState((prevState) => ({
eventProgress: 0,
callsCompleted: prevState.callsCompleted + 1
}))
} else {
this.setState((prevState) => ({
eventProgress: prevState.eventProgress + 1
}))
}
console.log(this.state.eventProgress)
})
return (
<div className="instance-container" id={this.state.id}>
{this.state.blocks}
<CompletionCounter callsCompleted={this.state.callsCompleted} />
<DisplayLog />
<VenueName />
</div>
)
}
}
Child Element
class ProgressBlock extends React.Component {
constructor(props) {
super(props)
this.state = {
light: false,
eventProgress: this.props.eventProgress,
bgColor: this.props.bgColor
}
}
componentWillUpdate() {
if (this.state.eventProgress >= this.props.eventPlace) {
this.setState({
light: true
})
}
}
render() {
console.log(this.state.eventProgress) // Does not log when parent changed
console.log(this.props.eventPlace) // Does not log when parent changed
const styleObj = {
backgroundColor: '#232323'
}
if (this.light) {
const styleObj = {
backgroundColor: this.props.bgColor
}
}
return <div className="progress-block" style={styleObj} />
}
}

Answer 1

The constructor in the child element is called once and hence your state is not gettinng updated in the child element. Also its an antipattern to set the state at the constructor when it depends on props. You should do it in the componentWillReceiveProps lifecycle function which is called when the props are updated. See the code below
class ProgressBlock extends React.Component {
constructor(props) {
super(props)
this.state = {
light: false,
eventProgress: '',
bgColor: ''
}
}
componentWillMount() {
this.setState({eventProgress: this.props.eventProgress, bgColor: this.props.bgColor});
}
componentWillReceiveProps(nextProps) {
this.setState({eventProgress: nextProps.eventProgress, bgColor: nextProps.bgColor});
}
componentWillUpdate() {
if (this.state.eventProgress >= this.props.eventPlace) {
this.setState({
light: true
})
}
}
render() {
console.log(this.state.eventProgress)
console.log(this.props.eventPlace)
const styleObj = {
backgroundColor: '#232323'
}
if (this.light) {
const styleObj = {
backgroundColor: this.props.bgColor
}
}
return <div className="progress-block" style={styleObj} />
}
}