Whats the easiest way to pass a single value between 2 React components?

Question

I'm getting the correct data in component A, now I need to pass that value to component B. In the first component is a click event that receives the clicked item, now I need to pass that clicked value to component B in order to do further formatting.

    class ReportsData extends Component {
    constructor(props) {
    super(props) 
        this.state = {
            value: null
    }
    render() {

    const {reports, employees} = this.props;
    let sortedReports = _.sortBy(reports, function(o) { return new moment(o.date); }).reverse();

    const handleClick = (item) => {
        return item // --> 2011 --> I NEED TO TAKE THIS VALUE AND PASS IT TO ReporstDetails COMPONENT // When I do setState = ({value: item}) error ???
    }

    const listReports = sortedReports.map(item => {

        return (
        <tr key={item.rowNumber}>
            <td>  {item.year}</td>

            <td> {item.month}</td>

            <td> {item.bruto_ukupno}</td>
            <td> {item.neto_plata}</td>
            <td> {item.topli_obrok}</td>

            <td> {item.doprinosi}</td>
            <td> {parseInt(item.ukupno_plata)}</td>

            <td className="table-actions">
                <Link onClick={this.handleClick.bind(this, item.year)}
                    to={`/reports/details`}>
                    <PieChart size="21"/>
                </Link>

            </td>
        </tr>
    )});

    return (
        <div className="container">
        <div>
            <header>
            <h4>A complete list of reports</h4>
            <p>Details available by clicking on an item </p>
            </header>
            <hr />
        </div>

        <table className="table table-striped">
        <thead>
        <tr>
            <th>Year</th>
            <th>Month</th>

            <th>Bruto</th>
            <th>Neto</th>
            <th>Meal</th>

            <th>Taxes</th>
            <th>Employees</th>
            <th>Details</th>
            <th></th>
       </tr>
        </thead>
         <tbody>
            {listReports}
        </tbody>
    </table>
   </div>
    );
}
}

export default ReportsData;

When I try to setState and pass it as props, I'm getting undefined.

I'm a beginner, so please forgive me and help me.

Answer 1

Easiest way is to pass your data in state of react-router Link

<Link to={{ pathname: '/reports/details', state: { item } }}>
    <PieChart size="21"/>
</Link>

and console this.props.location.state.item in /reports/details component... you will get your data

Answer 2

You can pass the item like this:

<Link to={{"/reports/details", query: your state here}}>
    <PieChart size="21"/>
</Link>

Then in your child component you can use this:

this.props.location.query

Answer 3

The issue you are facing is what lead to the creation of Redux, MobX and various other flux-like frameworks.

The solution to passing a prop between components that do not have a "parent" - "child" relationship is to use a Store.

Stores contain the application state and logic. Their role is somewhat similar to a model in a traditional MVC, but they manage the state of many objects — they do not represent a single record of data like ORM models do. Nor are they the same as Backbone's collections. More than simply managing a collection of ORM-style objects, stores manage the application state for a particular domain within the application.

You can have multiple Stores in your application where you can group your data and import/use the appropriate one on your components.

Note that you can still use the Store concept even without any of those libraries, example:

class UIStore {
    isModalActive = true;
}

const store = new UIStore();
export default store;

And then simply importing your store in any of your React components

import {UIStore} from 'stores';

And then accessing the property like:

UIStore.isModalActive

Or set its value:

UIStore.isModalActive = false;

My suggestion is though to use one of those libraries since you are going to need it sooner than later even for small size projects. They can notify any of your components that include them if their value changes and re-render them accordingly.

Store example in Redux

Store example in MobX

Answer 4

I am going to give you a suggestion which is just how things are done (in your case) in react. So here it is:

ParentComponent (contains your state: item?)

• Component A - gets a click handler from props that modifies item in ParentComponent's state

• Component B - gets the value of item from ParentComponent's state as props

That way when the click handler in Component A gets executed this will trigger a change in the state of ParentComponent, thus the whole thing gets rerendered again and your Component B receives relevant item value.

Hope this helps!

Answer 5

if component A has some state values if u need to pass to its child component B, then u need to pass it as props.

refer this reactjs.org