title: How to pass data from one component to another in React or React-Redux?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  
  
  class BigText extends Component {
  
    constructor(props) {
          super(props);
  
          this.state = {
              title: '',
              text: '',
              summary: ''
          };
  
          this.handleInputChange = this.handleInputChange.bind(this);
      }
  
      handleInputChange(event) {
  
          this.setState({
              [event.target.name]: event.target.value
          });
  
      }
  
    render() {
   
      return ( 
        &lt;div&gt;
          &lt;div&gt;
            &lt;div className="row animated fadeIn"&gt;
    
                  &lt;div className="px-1" style={{ width:100 + '%' }}&gt;&lt;br /&gt;
  
                      &lt;div className="mb-1"&gt;
                        &lt;input type="text"
                         className="form-control" 
                         placeholder="Title"
                         name="title"
                         value={this.state.title}
                         onChange={this.handleInputChange}
                         /&gt;
                      &lt;/div&gt;
  
                      &lt;div className="mb-1"&gt;
                        &lt;textarea 
                        className="form-control" 
                        placeholder="Text"
                        name="text"
                        value={this.state.text}
                        onChange={this.handleInputChange}
                        /&gt;
                      &lt;/div&gt;
  
                      &lt;div className="mb-1"&gt;
                        &lt;textarea
                         className="form-control" 
                         placeholder="Summary"
                         name="summary"
                         value={this.state.summary}
                         onChange={this.handleInputChange}
                         /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;                      
                &lt;/div&gt; 
            &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      )
      
    }
  }
  
  export default BigText;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import BigText from './bigText.js';
  import InboxStyle from './inboxStyle.js';
  import ImageStyle from './imageStyle.js';
  import BigTextMobile from './bigText.mobile.js';
  import InboxStyleMobile from './inboxStyle.mobile.js';
  import ImageStyleMobile from './imageStyle.mobile.js';
  
  class BasicNotification extends Component {
    
    constructor(props) {
      super(props);
      this.state = {value: ''};
  
      this.handleClick = this.handleClick.bind(this);
    }
  
    static contextTypes = {
      router: React.PropTypes.object
    }
  
    handleClick() {
      this.context.router.push('/notifications');
    }
  
    handleChange(event) {
      this.setState({value: event.target.value});
    }
  
      checkRadio =(e) =&gt;{
    if(e.target.checked) {
      this.setState({layout: e.target.value});
    }
  }
  
    render() {
  
      return (
        &lt;div&gt;
          &lt;div&gt;
            &lt;h1 className="px-2"&gt;Create Notification&lt;/h1&gt;
            &lt;hr /&gt;
            &lt;div className="row px-1 py-2 animated fadeIn"&gt;
    
                  &lt;div className="px-1 mr-2" style={{ width:50 + '%' }}&gt;&lt;br /&gt;
  
                      &lt;div className="mb-1"&gt;
                        &lt;input type="text"
                         className="form-control" 
                         placeholder="Title"
                         name="title"
                         /&gt;
                      &lt;/div&gt;
  
                      &lt;div className="mb-1"&gt;
                        &lt;textarea 
                        className="form-control" 
                        placeholder="Text"
                        name="text"
                        /&gt;
                      &lt;/div&gt;
  
                        &lt;div&gt;
                            &lt;select placeholder="Logo" className="form-control" onChange={this.handleChange}&gt;
                              &lt;option default&gt;Select Logo&lt;/option&gt;
                              &lt;option&gt;Default&lt;/option&gt;
                              &lt;option&gt;Custom&lt;/option&gt;
                            &lt;/select&gt;
                        &lt;/div&gt;
                      &lt;div&gt;&lt;br /&gt;
  
                        &lt;div className="btn-group" data-toggle="buttons"&gt;
                        
                        &lt;label className="btn btn-css btn-outline-secondary"&gt;
                          &lt;input type="radio" name="layout" value="image" onChange={this.checkRadio}/&gt;ImageStyle
                        &lt;/label&gt;
  
                        &lt;label className="btn btn-css btn-outline-secondary"&gt;
                          &lt;input type="radio" name="layout" value="big" onChange={this.checkRadio}/&gt;BigText
                        &lt;/label&gt;
  
                        &lt;label className="btn btn-css btn-outline-secondary"&gt;
                          &lt;input type="radio" name="layout" value="inbox" onChange={this.checkRadio}/&gt;InboxStyle
                        &lt;/label&gt;
                      &lt;/div&gt;
  
                        {
                            (this.state.layout === "big")?
  
                          &lt;BigText/&gt;:
  
                          (this.state.layout === "image")?
  
                          &lt;ImageStyle/&gt;:
  
                          (this.state.layout === "inbox")?
  
                          &lt;InboxStyle/&gt;:
  
                          null
                          }
  
                        &lt;br /&gt;
  
                      &lt;div className="row px-1" &gt;
                        &lt;div&gt;
                          &lt;button className="nav-link btn btn-block btn-info" onClick={this.handleClick} &gt;Save&lt;/button&gt;
                        &lt;/div&gt;
                        &lt;div className="px-1"&gt;
                          &lt;button className="nav-link btn btn-block btn-danger"&gt; Cancel&lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;/div&gt;&lt;br /&gt;
  
                  &lt;/div&gt;
                  &lt;div&gt;
                        {
                          (this.state.layout === "big")?
  
                          &lt;BigTextMobile text={this.state.text} summary={this.state.summary} title={this.state.title}/&gt;:
                          (this.state.layout === "image")?
  
                          &lt;ImageStyleMobile/&gt;:
  
                          (this.state.layout === "inbox")?
  
                          &lt;InboxStyleMobile/&gt;:
  
                          null
                        }
                  &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      )
      
    }
  }
  
  export default BasicNotification;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the screen i made on which I had imported three files which will be shown on clicking radio buttons.
  Also there is a relevant mobile screen as well shown aside
  now for example i imported as you can see BigText , it is containing the form
  Now i want to print its input values in BigTextMobile Component </p>