title: React use of conditionals components
body: <p>I'm new at React and I want to do something like this:</p>
  <pre><code>import React, { Component } from 'react'
  import axios from 'axios';
  import Post from './Post';
  
  export default class Home extends Component {
  
    state = {
     posts: []
    }
  
    componentDidMount(){
     this.getPosts();
  
    }
  
    getPosts = async () =&gt; {
     const res = await axios.get('http://localhost:4000/posts/');
     this.setState({posts:res.data});
  
     this.renderPosts();
   }
  
   renderPosts = () =&gt; {
  
    const firstCol = document.getElementById('first-col');
    const secondCol = document.getElementById('second-col');
    const thirdCol = document.getElementById('third-col');
  
  
   let x = 1;
  
  
  
   this.state.posts.map(post =&gt; {
  
    if(x === 1){
      firstCol.appendChild(&lt;Post&gt;&lt;/Post&gt;)
  
      x = x+1;
    }
    else if(x === 2){
      secondCol.appendChild(&lt;Post&gt;&lt;/Post&gt;)
  
      x = x+1;
    }
    else{
  
      thirdCol.appendChild(&lt;Post&gt;&lt;/Post&gt;)
  
      x = 1;
    }
  
  
   });
  
  };
  
  render() {
    ...
  }
  }
  </code></pre>
  <p>Obviously this lines are not correct: &quot;secondCol.appendChild()&quot;, how can I implement that functionality?</p>
  <p>And one thing more, how can I pass the data(title,imagepath) of every post from map function to the component ?</p>