reactjs - How to pass data from one component to another in React or React-Redux?

Question

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;

Answer 1

To simplify the solution you can do something like this:

<BigText onChange={data => {this.setState({ data })}} />

In the BigText component then you can put some data via this callback like this:

handleInputChange(event) {

    const data = {
        [event.target.name]: event.target.value
    };

    this.setState(data );
    this.props.onChange(data);
}

And transfer this data to your BigTextMobile component from state:

<BigTextMobile data={this.state.data} ... />