简体   繁体   中英

How can calling parent function from child component and passing parameters from child component to parent component in React Native?

I make a function with 12 arguments in the parent screen and call that function from the child component and pass parameters from a child but it is not working and rerender the screen unlimited time.

For example:

// This is my Array:
    const [DataArray, setDataArray] = useState([
        {
          title: 'Saudi Arabia',
          guest: '2 Guests',
          description: 'This is my Description',
          location: 'Riadh, KSA',
          estimateCost: '$1000',
          duration: '1 Month',
          groupSize: 'small',
          hostedIn: 'Michigan',
          includes: '2 Return Tickets',
          date: '12 July 2022',
          notes: 'N/A',
          locationDetails: 'House # 12, Makhdoom street, Al-Riadh, KSA',
        },
      ]);

Parent Screen Function:

// Add cards function.
  const AddCard = (a, b, c, d, e, f, g, h, i, j, k, l) => {
    let array = DataArray;
    array.unshift({
      title: a,
      guest: b,
      description: c,
      location: d,
      estimateCost: e,
      duration: f,
      groupSize: g,
      hostedIn: h,
      includes: i,
      date: j,
      notes: k,
      locationDetails: l
    });
    setDataArray(array);
    modalVisibleOff;
  };

Child Component from where I calling Function

<TouchableOpacity
                onPress={AddCard(
                  Title,
                  Guest,
                  Description,
                  Location,
                  EstimateCost,
                  Duration,
                  GroupSize,
                  HostedIn,
                  Includes,
                  Date,
                  Notes,
                  LocationDetails,
                )}
                style={styles.Button}>
                <Text style={styles.ButtonText}>Submit</Text>
              </TouchableOpacity>

In your child component you are calling AddCart function immediately. Here is the updated code

 <TouchableOpacity onPress={() => AddCard( Title, Guest, Description, Location, EstimateCost, Duration, GroupSize, HostedIn, Includes, Date, Notes, LocationDetails, )} style={styles.Button}> <Text style={styles.ButtonText}>Submit</Text> </TouchableOpacity>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM