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;

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;

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

its a long story. check out egghead.io/courses/getting-started-with-redux — Fazal Rasel
– Fazal Rasel, Commented Apr 17, 2017 at 16:21
yes.. there are ways. One might use Share Common Parent Component. — Fazal Rasel
– Fazal Rasel, Commented Apr 17, 2017 at 16:28

Roman Maksimov · Accepted Answer · 2017-04-18 07:40:02Z

3

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} ... />

edited Apr 18, 2017 at 7:40

answered Apr 17, 2017 at 20:51

Roman Maksimov

1,6551 gold badge12 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Piyush Over a year ago

i had BigText code snippet can you tell now how to do?

Roman Maksimov Over a year ago

I've edited the answer. There is one of the solutions. You also can do it via componentWillUpdate

Roman Maksimov Over a year ago

Show what you've produced eventually.

Roman Maksimov Over a year ago

I mean could you provide the code of modified BigText and BasicNotification components?

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related