title: Passing values to other components using props in reactjs
body: <p>I'm binding some text values when a certain div is clicked in my react application. Now i'm facing a problem on passing these text values to another component using props. </p>
  
  <p>My code looks like this </p>
  
  <pre><code>class PostOptionBar extends Component {
  
      constructor() {
          super();
  
          this.state = {
  
              postType: 'text',
  
          }
  
      }
  
      textType(postType) {
  
          this.setState({postType});
  
      }
  
      render() {
  
          return (
  
              &lt;div className="post_type_selection_div"&gt;
  
                  &lt;div className="post_type_btn"&gt;
  
                      &lt;div className="horiz_center" onClick={this.textType.bind(this,'text')}&gt;
                          &lt;img src={StarIcon} className="post_type_icon"/&gt;
                          &lt;a className="post_type_text"&gt;Text&lt;/a&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
  
                  &lt;div className="post_type_btn" onClick={this.textType.bind(this,'imageVote')}&gt;
  
                      &lt;div className="horiz_center"&gt;
                          &lt;img src={StarIcon} className="post_type_icon"/&gt;
                          &lt;a className="post_type_text"&gt;Image poll&lt;/a&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div className="post_type_btn" onClick={this.textType.bind(this,'poll')}&gt;
  
                      &lt;div className="horiz_center"&gt;
                          &lt;img src={StarIcon} className="post_type_icon"/&gt;
                          &lt;a className="post_type_text"&gt;Text poll&lt;/a&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
  
              &lt;/div&gt;
  
          );
      }
  }
  
  export default PostOptionBar;
  </code></pre>
  
  <p>I can bind the values successfully within this class. If i log the <code>postType</code> i can clearly see that. But i want to pass <code>postType</code> to another component. I'm loading <code>PostOptionBar</code> in my other component like this.</p>
  
  <pre><code> &lt;div className="polaroid"&gt;
     &lt;PostOptionBar/&gt;
   &lt;div&gt;
  </code></pre>
  
  <p>I'm trying to do something like this in my 2nd component.But because i cannot pass <code>postType</code> from my 1st component to 2nd one i cannot do this.</p>
  
  <pre><code>    renderTab() {
  
          switch (this.state.postType) {
              case 'text':
                  return &lt;TextPost/&gt;
              case 'imageVote':
                  return &lt;ImageVote/&gt;
              case 'poll':
                  return &lt;TextVotePost/&gt;
  
          }
      }
  </code></pre>