React.js transferring prop state from sibling to a different sibling?

Question

I'm extremely new to react and javascript so I'm sorry if I'm asking this wrong. This is for a group project which means I most likely don't understand the project 100%

The older sibling has this nice prop that I want to use:

```

export default class OlderSibling extends Component {
  state = {
    currentCity: city //(that was gathered from a bunch of other steps)
  };

  render() {
     return(
      )
  }
}

```

The parent file doesn't have this prop, but it does have its own stuff. I do not care for these other props though.

```

class Parent extends Component {
   constructor(props) {
     super(props)
     this.state = {
          flower: 'red'
     }
    }

 render() {
    return (
         <OlderSibling/>
         <YoungerSibling/>
    )
  }
}

```

The younger sibling (the one that wants current city) has a bunch of this.state properties that I do not want to share with others but just want the older sibling's stuff (I guess like what younger siblings normally do).

```

   export class YoungerSibling extends Component {
     constructor(props) {
        super(props);
        this.state = {
              title: '',
              description: []
         }
     }

    render() {
          return(

           )
     }
}

```

Just in case I wasn't clear, younger sibling just wants older sibling's this.state: currentCity that older Sibling worked so hard to gather.

I know I didn't put the code completely, but if you want to critique it anyway, please do! I am still learning and I welcome every bit of feedback!

I looked up ways to do this, but they're all about transferring parent to child which is not what I want. I also read that there was Redux that could handle this?? I don't know if my fellow groupmates are interested in that just yet.

Thank you for your time in reading this!

EDIT:

[ SOLVED ]

I just want to edit and say thank you to @soupette, @Liam, @[Denys Kotsur], and @Tomasz for helping me to understand react a bit more. I realize that this post was very much a spoon feeding request and you all helped away. Thank you!

Also, just in case anybody else ran into this issue, don't forget to call it on Younger Sibling as this.props.currentCity .

If you want some truth shared between the two siblings, giving that piece of truth their parent is the most common way to go. It is advised that information flows from top to bottom in the component tree. You already proposed this solution in your question, along with the Redux solution (or some other store where any component can connect independently). Another "messier" solution I can propose to you would be the usage of LocalStorage — Freeman Lambda, Mar 20 '18 at 16:04
Duplicate [reactjs-two-components-communicating](https://stackoverflow.com/questions/21285923/reactjs-two-components-communicating) — oklas, Mar 20 '18 at 16:35

score 2 · Answer 1 · answered Mar 20 '18 at 16:13

You can do something like:

class Parent extends Component {
  state = {
     flower: 'red'
     currentCity: '',
   };

   updateCurrentCity = (currentCity) => this.setState({ currentCity });

   render() {
     return (
       <OlderSibling updateCurrentCity={this.updateCurrentCity} />
       <YoungerSibling city={this.state.currentCity} />
     );
   }
}

then in your OlderSibling you can update the parent's state with a function:

export default class OlderSibling extends Component {
  state = {
    currentCity: city //(that was gathered from a bunch of other steps)
  };

  componentDidUpdate(prevProps, prevState) {
    if (prevState.currentCity !== this.state.currentCity) {
      this.props.updateCurrentCity(this.state.currentCity);
    }
  }

  render() {
    return(
    );
  }
}

thank you so much for setting it up for me to easily understand. I greatly appreciate it. It's definitely making that lifting state section up a lot more understandable. sorry I can't upvote yet. Working on it right now to see if it works. Thanks again! — PepperAddict, Mar 20 '18 at 16:27

score 2 · Answer 2 · answered Mar 20 '18 at 16:17

You should create Parent component for these two ones and keep state there.

Also, you should pass it into two children (YoungerSibling and OlderSibling) as a prop and add inverse data flow for OlderSibling so when city is changed in the OlderSibling then ParentSibling should know about this.

For example:

Parent.jsx

  class Parent extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        currentCity: ''
      }
    }

    currentCityChangeHandler = city => {
      this.setState({currentCity: city});
    };

    render() {
      const { currentCity } = this.state;

      return(
        ...
        <OlderSibling 
            currentCity={currentCity}  
            onCurrentCityChange={this.currentCityChangeHandler} 
        />
        <YoungerSibling currentCity={currentCity} />
        ...
      )
    }
  }

OlderSibling.jsx

  class OlderSibling extends React.Component {
    ...

    // Somewhere when new city is coming from
    // You should pass it into the callback
    newCityComingFunction() {
      const city = 'New York';

      // Pass the new value of city into common `Parent` component
      this.props.onCurrentCityChange(city);
    }

    ...
  }

So in this case it will allow you to use this param in both cases and it will be keep updated.

In addition, you should use this.props.currentCity in the OlderSibling instead of using this.state.currentCity in this component because it's value is moved into Parent's component state.

Hope it will helps.

Thank you thank you for your feedback. I'm sorry I can't upvote yet. I really appreciate you setting this up for me to understand. I'm working on it right now. — PepperAddict, Mar 20 '18 at 16:35

score 2 · Accepted Answer · answered Mar 20 '18 at 16:18

2

As the previous answer suggests lift the state up I also prefer to use it

Here's an example

answered Mar 20 '18 at 16:18

Liam

6,517
7
25
47

I'm sorry I can't upvote yet. I greatly appreciate you taking the time to set that up for a noob like me to easily understand it. Thank you! I'm working on it right now. – PepperAddict Mar 20 '18 at 16:26
No problem, I'm not here to earn points but to share the knowledge. Good luck with your project :) – Liam Mar 20 '18 at 16:30

score 1 · Answer 4 · answered Mar 20 '18 at 16:03

1

You got two choices.

use external state management library like redux.
lift the state up - which means Parent component will hold currentCity in the state.

There could be 3rd option of using contex API but I'm not sure how to do it here.

answered Mar 20 '18 at 16:03

Tomasz Mularczyk

34,501
19
112
166

React.js transferring prop state from sibling to a different sibling?

4 Answers4