Comment passer des données d'un composant à l'autre de Réagir ou de Réagir-Redux?

JS:

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 ( 
<div>
<div>
<div className="row animated fadeIn">
<div className="px-1" style={{ width:100 + '%' }}><br />
<div className="mb-1">
<input type="text"
className="form-control" 
placeholder="Title"
name="title"
value={this.state.title}
onChange={this.handleInputChange}
/>
</div>
<div className="mb-1">
<textarea 
className="form-control" 
placeholder="Text"
name="text"
value={this.state.text}
onChange={this.handleInputChange}
/>
</div>
<div className="mb-1">
<textarea
className="form-control" 
placeholder="Summary"
name="summary"
value={this.state.summary}
onChange={this.handleInputChange}
/>
</div>
</div>
<div>                      
</div> 
</div>
</div>
</div>
)
}
}
export default BigText;

JS:

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) =>{
if(e.target.checked) {
this.setState({layout: e.target.value});
}
}
render() {
return (
<div>
<div>
<h1 className="px-2">Create Notification</h1>
<hr />
<div className="row px-1 py-2 animated fadeIn">
<div className="px-1 mr-2" style={{ width:50 + '%' }}><br />
<div className="mb-1">
<input type="text"
className="form-control" 
placeholder="Title"
name="title"
/>
</div>
<div className="mb-1">
<textarea 
className="form-control" 
placeholder="Text"
name="text"
/>
</div>
<div>
<select placeholder="Logo" className="form-control" onChange={this.handleChange}>
<option default>Select Logo</option>
<option>Default</option>
<option>Custom</option>
</select>
</div>
<div><br />
<div className="btn-group" data-toggle="buttons">
<label className="btn btn-css btn-outline-secondary">
<input type="radio" name="layout" value="image" onChange={this.checkRadio}/>ImageStyle
</label>
<label className="btn btn-css btn-outline-secondary">
<input type="radio" name="layout" value="big" onChange={this.checkRadio}/>BigText
</label>
<label className="btn btn-css btn-outline-secondary">
<input type="radio" name="layout" value="inbox" onChange={this.checkRadio}/>InboxStyle
</label>
</div>
{
(this.state.layout === "big")?
<BigText/>:
(this.state.layout === "image")?
<ImageStyle/>:
(this.state.layout === "inbox")?
<InboxStyle/>:
null
}
<br />
<div className="row px-1" >
<div>
<button className="nav-link btn btn-block btn-info" onClick={this.handleClick} >Save</button>
</div>
<div className="px-1">
<button className="nav-link btn btn-block btn-danger"> Cancel</button>
</div>
</div>
</div><br />
</div>
<div>
{
(this.state.layout === "big")?
<BigTextMobile text={this.state.text} summary={this.state.summary} title={this.state.title}/>:
(this.state.layout === "image")?
<ImageStyleMobile/>:
(this.state.layout === "inbox")?
<InboxStyleMobile/>:
null
}
</div>
</div>
</div>
</div>
)
}
}
export default BasicNotification;

C'est l'écran que j'ai faite sur lequel j'avais importé trois fichiers qui vont être affichés en cliquant sur les boutons radio.
Aussi, il s'agit d'un écran de mobile ainsi montré de côté
en ce moment par exemple j'ai importé comme vous pouvez le voir BigText , il est contenant le formulaire
Maintenant, je veux imprimer ses valeurs d'entrée dans BigTextMobile Composant