title: Why React Components being stored as variables or as state is bad design practice
body: <p>My application makes an API call and turns each element of a JSON array into a React Component.</p>
  
  <p>I made an array of these child components, but they do not render. How do I force them to render? Should I use the <code>React.create()</code> and then call <code>render()</code> on each?</p>
  
  <p>What is the proper vanilla React design pattern for this?</p>
  
  <pre><code>var apiPosts = [];
  
  class PostsItsContainer extends Component {
   constructor(props){
   super(props);
   this.state = {}
   }
  
  componentDidMount(){
     let uri = "some_API_endpoint" ; 
  
     if(uri){ 
      fetch(uri)
     .then(data =&gt; data.json())
     .then(posts =&gt; {
       posts.data.children.forEach(post =&gt; {
         let imgUrl = post.data.hasOwnProperty('preview') ? post.data.preview.images[0].source.url : null;
         let postData = [post.data.title, imgUrl, post.data.link];
         apiPosts.push(&lt;PostIt link={post.data.url} image={imgUrl} title={post.data.title} /&gt;);
       });
     }).catch(err =&gt; console.log(err)) }
  
   }
  
   render() {
     return (
       &lt;div className="PostsItsContainer"&gt;
        {apiPosts}
       &lt;/div&gt;
     );
   }
  }
  </code></pre>
  
  <p>EDIT: </p>
  
  <p>I changed my title cause it was pretty generic. And really I was asking why my method was bad design practice and wouldn't give me proper results. </p>
  
  <p>@Jayce444 told me why and @Supra28 gave a good answer. I'm posting @Jayce444's comment here for it to be easily read: </p>
  
  <blockquote>
    <p>It's perfectly possible to store a component in a variable or array and then use that. But the store/props should be reserved for the bare bones data needed to render stuff, not the entire pre-made component. There's s few reasons, two being: firstly you'll bloat the state/props doing that, and secondly you're combining the logic and view functionalities. The data needed to render a component and the actual way it's rendered should be loosely coupled, makes your components easier to maintain, modify and understand. It's like separating HTML and CSS into separate files, it's easier :) </p>
  </blockquote>