Dynamic props for components in an array

Just learning React and faced the problem:

In the main App component, there is a simple Container component that takes an array of various components and renders them "into itself." Also App has state

{ isAcive: true, content: [] // здесь будут компоненты, которые передаются Container'у } 

Container component code:

 const Container = (props) => { return ( <div className="Container"> {props.content} //props.content - массив различных компонентов </div> ); } 

I refer to him like this (in App):

 <Container key="Container" content={this.state.content} /> 

this.state.content above is an array of various components and is created by the cycle after receiving some data from the server and is written via setState to the content state of the App component. This array looks like this:

 [ <CompA key="a" isActive={this.state.isActive} title={serverResponse[0].title} />, <CompB key="b" isActive={this.state.isActive} title={serverResponse[1].title} />, <CompC key="c" isActive={this.state.isActive} title={serverResponse[2].title} /> ]; 

The problem is that the components in the array above refer to the App state, then they take the value isActive and are "formed" once and then written to the content state of the App component. This means that when you change isActive with the App State, these components will neither react nor “re-form” with the new isActive.

Question: How to make the compA, CompB and CompC components be as dynamic and change depending on the state in the App or what am I doing wrong ?;

What I tried (shamefully): Transfer isActive to Conteiner and iterate over arrayWithSomeComponents inside Conteiner via map, rewriting props.isActive from CompA, CompB and CompC objects, but reacts.

Verbose, but I think, clearly explained the essence of the problem. I hope for your help.