Try to search your question here, if you can't find : Ask Any Question Now ?

How to pass 2 props on one onClick/onPress method?

HomeCategory: stackoverflowHow to pass 2 props on one onClick/onPress method?
Avatarpushpa asked 5 months ago

I am working with a React app and I need to pass down an id to a modal which is open on an onClick/onPress method.

The component below is a component I am going to use to render some data coming from an array, it is the component from where the modal is call:

// imports ...

import {
  passengerCardIdAction,
  pickupPassengerCardIdAction,,
} from '../../screens/HomeScreen/actions/homeScreen';

const PassengersInfo = ({
  id, // THIS IS THE ID I NEED
  name,
  address,
  datetime,
  callModal,
  cardinalpoint,
  navigationStore,
}) => {

  return (
    <View>
      <View>
        <View>
         // MAYBE I CAN SET SOMETHING HERE WHERE I GRAB THE ID 
         // ON THE onPress METHOD ALONG WITH THE CALL MODAL FUNCTION
         <TouchableOpacity onPress={callModal}>         
           CALL MODAL
         </TouchableOpacity>
        </View>    
      </View>
    </View>
  );
};

export default compose(
  connect(
    store => ({
      passengerCardId: store.homeScreen.passengerCardId,
      pickupPassengerCardId: store.homeScreen.pickupPassengerCardId,
    }),
    dispatch => ({
      passengerCardIdActionHandler: id => {
        dispatch(passengerCardIdAction(id));
      },
      pickupPassengerCardIdActionHandler: id => {
        dispatch(pickupPassengerCardIdAction(id));
      },       
    }),
  ),
)(PassengersInfo);

Then, that component is call here:

class PassengerCardBasedOnRoute extends Component {

  const { popupsModalsActionHandler, searchParam } = this.props;
  render() {
    return (
     {passengerInfo.map(info => (
      <View key={info.id}>
        <PassengersInfo
          id={info.id}
          name={info.name}
          address={info.address}
          datetime={info.timestamp}
          searchParam={searchParam}
          cardinalpoint={info.cardinalpoint}
          callModal={popupsModalsActionHandler}
        />
      </View>
     )}
    );
  }
};

export default compose(
  connect(
    store => ({
      searchParam: store.homeScreen.searchParam,
      navigationStore: store.homeScreen.navigation,
      passengerCardId: store.homeScreen.passengerCardId,
      allPassengersDropOffOptionsPopup:
        store.popupsModals.allPassengersDropOffOptionsPopup,
      pickupPassengerCardId: store.homeScreen.pickupPassengerCardId,
    }),
    dispatch => ({
      popupsModalsActionHandler: data => {
        dispatch(popupsModalsAction(data));
      },
      passengerCardIdActionHandler: id => {
        dispatch(passengerCardIdAction(id));
      },
      pickupPassengerCardIdActionHandler: id => {
        dispatch(pickupPassengerCardIdAction(id));
      },
    }),
  ),
)(PassengerCardBasedOnRoute);

I can grab the ID and set it with with Redux if that’s an option.
before, I was setting the modal info the PassengersInfo component but as it is an array. the component gets called around 40 times because that the times the parent component is render.

This is how I was doing it before:

    return (
     {passengerInfo.map(info => (
      <View key={info.id}>
        <OptionsModal>
          {
            <AllPassengersOptionsModal
              id={info.id}
              handleDeleteOptionsModal={() =>
                this.handleDeletePassenger(info.id)
              }
              handleCallOptionsModal={() =>
                Linking.openURL(`tel:${info.phone}`)
              }
            />
          }
        </OptionsModal>
        <PassengersInfo
          id={info.id}
          name={info.name}
          address={info.address}
          datetime={info.timestamp}
          searchParam={searchParam}
          cardinalpoint={info.cardinalpoint}
          callModal={popupsModalsActionHandler}
        />
      </View>
     )}
    );

So, in that way above I was getting the data exactly as I needed it. So how can I implement something to grab the ID I need? I need is the info on every card separately because the modal includes actions like delete and call specifically.

See the notes in my code.

1 Answers
Best Answer
AvatarMikhail answered 5 months ago
Your Answer

6 + 15 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com