How Do You Change Parent Component' State From Child Component?

Question

What I'm Trying To Do

In my first component, I get items that's status is 2 and make them into checkbox.

In my second component, I change items's status to 3.

Im third component, after changing status in the second component, modal opens.

When Modal closes, navigation goes back to the first component.

The Problem is that items I changed their status are still in the first component.

Their status is 3, so they shouldn't be in the first component.

In this case, how do you solve this?

it looks like, componentDidUpdate doesn't work here.

I would appreciate it if you could give me any advices.

Current Code

first component

export default class fist extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      checkedItems: [],
    };
  }

  onUpdate = (item) => {
    this.setState((previous) => {
      const { checkedItems } = previous;
      const index = checkedItems.indexOf(item);
      if (index === -1) {
        checkedItems.push(item);
      } else {
        checkedItems.splice(index, 1);
      }
      return { checkedItems };
    });
  };

  async componentDidMount() {
    const items = db.itemsCollection
      .where('status', '==', 2)
      .get();
    this.setState({ items });
  }

  render() {
    const { items, checkedItems } = this.state;
    return (
      <Container>
        <View style={styles.list_asset}>
          {items.map((item) => (
            <View style={styles.article_asset} key={item.id}>
              <Text style={styles.phrase}>{item.name}</Text>
              <View style={styles.area_price}>
                <CheckBox
                  style={styles.check}
                  checked={!!checkedItems.find((obj) => obj == item)}
                  onPress={() => this.onUpdate(item)}
                />
              </View>
            </View>
          ))}
        </View>
      </Container>
    );
  }
}

second component

updateItemsStatus = (id) => {
    this.itemsCollection.doc(id).update({
      status: 3,
      updated_at: new Date(),
    });
    return true;
  }

third component

<TouchableOpacity
  onPress={() => {this.props.navigation.navigate('first component')}}
>
  <Text>Close Modal</Text>
</TouchableOpacity>

Answer 1

If I understand, your problem is that your data are not refreshed after the modal is closed.

That's because you get your data in ComponentDidmount() which is triggered once, and then you directly update the database.

In your second component, you can pass a method from your parent that will update your state. Here is a generic example:

class App extends React.Component {

  state = {...items};

  updateState = (newStatus) => {
    this.setState(prevState => ({...prevState, status:newStatus}));
    // or get data again from your db (careful about async)
  };
  render() {
    return (
      <Child updateState={updateState} />
    )
  }

}

class Child  extends React.Component {
  render(){
    return <TouchableOpacity onPress={() => this.props.updateState(3)}>Touch me daddy</TouchableOpacity>
  }
}