从父级访问子级 state

Question

Background

I'm building an app which has at some point a FlatList which renders products. The code for the list looks like this:

<FlatList
                data={data}
                renderItem={({ item }) => (
                    <View style={styles.container}>
                        <View style={styles.left}>
                            <Text style={styles.title}>{item.name}</Text>
                            <Text style={styles.description}>{item.description}</Text>
                            <Text style={styles.price}>${item.price}</Text>
                            <Counter />
                        </View>
                        <Image style={styles.right} source={{uri: item.image}}/>
                    </View>
                )}
            /> 

The data for this list is brought over from a Google Cloud Firestore document. Within this list you can see a component called Counter , its job is to allow the user to add and delete products from their cart. This is its code:

export default function Counter () {  


    const [count, setCount] = useState(0);

      const handleAddition=()=>{
        setCount(count + 1)
      }

      const handleDeletion=()=>{
        {count === 0 ? setCount(count) : setCount(count - 1)}
      }
return ( 
    
    <View style={styles.adder}>
        <TouchableOpacity onPress={() => {handleDeletion()}}>
            <Text style={styles.less}>-</Text>
        </TouchableOpacity>
        <Text style={styles.counter}>{count}</Text>
        <TouchableOpacity onPress={() => {handleAddition()}}>
            <Text style={styles.more}>+</Text>
        </TouchableOpacity>
    </View>

)
}

Problem

As you can see from the fact that I'm rendering the counter within a FlatList, I need to keep the state stored in the child rather than in the parent, as having the count in the parent would mean that if the user selects one product, every item is added at the same time.

I need to have the a button show up when the user selects a product that allows them to navigate to their purchase summary and also I need that button to display the total cost of their selection and amount of products chosen. As you might imagine, I've no idea how to access the child's state in the parent component.

So to sum it all up: I have a child with a state update that I need to access from its parent, but I do not know how to do it.

Question ¨

Is there any way to listen to event changes in a child's state or passing it up as a prop or something like that?

Thanks a lot in advance!

Extra information

This is image shows the UI of the screen. When pressing the "+" button it updates the count +1 and it should also display a button showing the info I mentioned before.

Answer 1

In renderItem you can pass method callback in here

<Counter onPressFunctionItem={(isPlus) => { // handle from parent here }} />

export default function Counter ({ onPressFunctionItem }) {  


    const [count, setCount] = useState(0);

      const handleAddition=()=>{
        setCount(count + 1)
        if (onPressFunctionItem) {
          onPressFunctionItem(true)
        }
      }

      const handleDeletion=()=>{
        {count === 0 ? setCount(count) : setCount(count - 1)}
        if (onPressFunctionItem) {
          onPressFunctionItem(false)
        }
      }
   return (...)
}

Answer 2

Final Output:

You don't really need to pass the child component's state to the parent to achieve the same result, you can do that very easily the conventional way.

Here is the source code of above example:

export default function App() {
  const [products, setProducts] = useState(data);

  /* 
  with this function we increase the quantity of 
  product of selected id
  */
  const addItem = (item) => {
    console.log("addItem");
    let temp = products.map((product) => {
      if (item.id === product.id) {
        return {
          ...product,
          quantity: product.quantity + 1,
        };
      }
      return product;
    });

    setProducts(temp);
  };

  /* 
  with this function we decrease the quantity of 
  product of selected id, also put in the condition so as 
  to prevent that quantity does not goes below zero
  */
  const removeItem = (item) => {
    console.log("removeItem");
    let temp = products.map((product) => {
      if (item.id === product.id) {
        return {
          ...product,
          quantity: product.quantity > 0 ? product.quantity - 1 : 0,
        };
      }
      return product;
    });
    setProducts(temp);
  };

  /*
   this varible holds the list of selected products.
  if required, you can use it as a seperate state and use it the 
  way you want
   */
  let selected = products.filter((product) => product.quantity > 0);

  /**
   * below are two small utility functions,
   * they calculate the total itmes and total price of all
   * selected items
   */
  const totalItems = () => {
    return selected.reduce((acc, curr) => acc + curr.quantity, 0);
  };
  const totalPrice = () => {
    let total = 0;
    for (let elem of selected) {
      total += elem.quantity * elem.price;
    }
    return total;
  };

  useEffect(() => {
    console.log(products);
  }, [products]);

  return (
    <View style={styles.container}>
      <FlatList
        data={products}
        renderItem={({ item }) => {
          return (
            <Card style={styles.card}>
              <View style={styles.textBox}>
                <Text>{item.name}</Text>
                <Text>$ {item.price.toString()}</Text>
                <View style={{ flexDirection: "row" }}></View>
                <View style={styles.buttonBox}>
                  <Button
                    onPress={() => removeItem(item)}
                    title="-"
                    color="#841584"
                  />
                  <Text>{item.quantity.toString()}</Text>
                  <Button
                    onPress={() => addItem(item)}
                    title="+"
                    color="#841584"
                  />
                </View>
              </View>
              <Image
                style={styles.image}
                source={{
                  uri: item.image,
                }}
              />
            </Card>
          );
        }}
      />

      <View style={{ height: 60 }}></View>

      {selected.length && (
        <TouchableOpacity style={styles.showCart}>
          <View>
            <Text style={styles.paragraph}>
              {totalItems().toString()} total price ${totalPrice().toString()}
            </Text>
          </View>
        </TouchableOpacity>
      )}
    </View>
  );
}

You can find the working app demo here: Expo Snack