Passing values to other components using props in reactjs

Question

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.

My code looks like this

class PostOptionBar extends Component {

    constructor() {
        super();

        this.state = {

            postType: 'text',

        }

    }

    textType(postType) {

        this.setState({postType});

    }

    render() {

        return (

            <div className="post_type_selection_div">

                <div className="post_type_btn">

                    <div className="horiz_center" onClick={this.textType.bind(this,'text')}>
                        <img src={StarIcon} className="post_type_icon"/>
                        <a className="post_type_text">Text</a>
                    </div>

                </div>


                <div className="post_type_btn" onClick={this.textType.bind(this,'imageVote')}>

                    <div className="horiz_center">
                        <img src={StarIcon} className="post_type_icon"/>
                        <a className="post_type_text">Image poll</a>
                    </div>

                </div>

                <div className="post_type_btn" onClick={this.textType.bind(this,'poll')}>

                    <div className="horiz_center">
                        <img src={StarIcon} className="post_type_icon"/>
                        <a className="post_type_text">Text poll</a>
                    </div>

                </div>


            </div>

        );
    }
}

export default PostOptionBar;

I can bind the values successfully within this class. If i log the postType i can clearly see that. But i want to pass postType to another component. I'm loading PostOptionBar in my other component like this.

 <div className="polaroid">
   <PostOptionBar/>
 <div>

I'm trying to do something like this in my 2nd component.But because i cannot pass postType from my 1st component to 2nd one i cannot do this.

    renderTab() {

        switch (this.state.postType) {
            case 'text':
                return <TextPost/>
            case 'imageVote':
                return <ImageVote/>
            case 'poll':
                return <TextVotePost/>

        }
    }

Answer 1

To solve that issue, you need to manage the state by the parent component of PostOptionBar then pass the value to PostOptionBar and other components also. Also pass a function to PostOptionBar component to update the state of parent component.

Parent Component of PostOptionBar :

<div className="polaroid">
    <PostOptionBar postType = {this.state.postType} changeType = {this.changeType}/>
<div>

changeType = (postType) => {
   this.setState({postType})
}

Inside PostOptionBar use the props value this.props.postType :

class PostOptionBar extends Component {

    textType(postType) {
        this.props.changeType(postType);  // call the parent component to update the state
    }

    render() {
        return (
            ...
        );
    }
}

Answer 2

set state using

<Component2 postType={this.state.postType}/>

and fetch in component2 using

this.props.postType