Q:

ReactJS setting css classes based on props

I'm using react to build a list app, and I want to add css classes based on different events. I figured I could easily add/remove classes based on passing different props to the component. The list items are sent from the store, and handled in the container, and the translation of different props into css classes is done in the components. 
At the moment I create an array of all the items in the container, like this:
this.state = {
    items: this.props.items.map(function(item){
        return <ItemWrapper><item/></ItemWrapper>
    })
}

Then, in ItemWrapper, for example:
(if this.props.isActive) {
    return <li className='active'>{this.props.children}</li>
}

So whenever I want to add the 'active' class to an item, I set the "isActive" prop on it.
But because all items are saved in an array in the container state, I have to create a copy of the array every time I want to change the "isActive" prop, so clearly not a great solution, especially as the list grows. 
I've thought of saving each item under its own key in the state, but then if I want to add classes via timing events - say add a class to one element and remove it from another every set period of time - it becomes difficult. 
What's the most efficient way to manage these class changes?

A:

I don't think you have to store components in your state, just store an array of objects and the active index, this is how I do :
the parent component state :     
{
    children : [{name : 'first', id : 1 }, {name : 'second', id : 2 }, ... ],
    active : 1
}

in a render method of the parent component :
this.state.children.map( (child, i) => {
        const active = ( i == this.state.active )
        return <Child key={i} active={active}>{child.name}</Child>
    }
})

the child component : 
const Child = (props) => { 
    const active = props.active ? 'active' : '';
    return <div className={active}>{props.children}</div>
}

And it seems that you are using a Redux store, in this case avoid using this.state = ... and this.setState(), instead use connect from react-redux in your parent component with a mapStateToProps function. 
Let me know if it helps.

