React.js将prop状态从同级转移到其他同级？

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 .

Answer 1

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(
    );
  }
}

Answer 2

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.

Answer 3

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

Here's an example

Answer 4

You got two choices.

1. use external state management library like redux.
2. 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.