Reactjs not rerendering for component array

Question

This is a question more about the general way that reactjs handles rerendering and how components in arrays work.

So I have a function that creates an array of components but the users props is empty if I do it as follows:

// General look of the component
// <StartMultiple key={this.count} users={this.state.users} id={this.count} delete_this={this.delete_this}/>

// Just an example
this.array = []
add_repeat() // do this 5 times, for example

render(
    {this.array} // users prop is empty
)

add_repeat()
{   
    this.repeats.push(<StartMultiple key={this.count} users={this.state.users} id={this.count} delete_this={this.delete_this}/>);
    this.setState({ repeats: this.repeats }); 
    this.count++;
} 

But if I just stick a <StartMultiple key={this.count} users={this.state.users} id={this.count} delete_this={this.delete_this}/> directly into the return()render() it updates its props as appropriate. (being updated by a this.setState())

So my question is, is there a way to fix this empty array props inside the component array, or should I just look to display them in another way? E.g. map()

Answer 1

React components don't belong in state, react state should contain serializable application state, not components which are visual representation of that state.

Please see here, under the "what shouldn't go in state":

http://web.archive.org/web/20150419023006/http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-shouldnt-go-in-state