How to change all states of certain part of child components in reactjs

Question

http://codepen.io/adamchenwei/pen/yagLLZ?editors=0010

I have FormatModule component which is two levels deep from RepeatModule. I want whenever onClick is triggers onClick={this.props.changeFormat.bind(this)} on the FormatModule, it will change all the statues for all the of islamic to islamic: '09999999',, or whichever got passed in from changeFormat function inside the RepeatModule

I heard this is the only way to manipulate state massively when its nested inside a list of components.

For now, when I click on where onClick={this.props.changeFormat is implemented, values are not response to the change. I wonder where is the place I missed link? Since changeFormat is a function that got passed in from the top parent component down to the FormatModule... unless its not the way to do it?

NOTE: I need a solution that not involving Redux or Flux

Answer 1

With a help of colleague, its already fixed in my code pen: http://codepen.io/adamchenwei/pen/yagLLZ?editors=0010

So the issue was that:

1. I bind(this) in the wrong scope. Should only bind inside the RepeatModule
2. the newFormat state should follow the format of the original format ( in this case it was an array so newFormat should be an array as well!

Enjoy!

(Hope whoever voted down my questions come back and learn their stuff before put others down first, especially without any reason)