React Refactoring component with too many props

user_13943651 0
Viewed 152

I have a component "Collage", which renders 4 types of images: BANNER, SQUARE, PORTRAIT and POSTER.

function Collage({ banner, square, portrait, poster }) {
   return (
       <View>
           <Image uri={banner?.uri} style={styles.banner} />
           <Image uri={square?.uri} style={styles.square} />
           <Image uri={portrait?.uri} style={styles.portrait} />
           <Image uri={poster?.uri} style={styles.poster} />
       </View>
   );
}

Collage.propTypes = {
    banner: PropTypes.shape({
        uri: PropTypes.string.isRequired
    }),
    square: PropTypes.shape({
        uri: PropTypes.string.isRequired
    }),
    portrait: PropTypes.shape({
        uri: PropTypes.string.isRequired
    }),
    poster: PropTypes.shape({
        uri: PropTypes.string.isRequired
    }),
}

Now, I wanna add the functionality of doing something (different for each image) when pressing the collage images.

Something like:

 <Collage 
    banner={banner}
    onPressBanner={handleOnPressBanner}
    square={square}
    onPressSquare={handleOnPressSquare}
    portrait={portrait}
    onPressPortrait={handleOnPressPortrait}
    poster={poster}
    onPressPoster={handleOnPressPoster}
 />


 ...

 function Collage({ banner, onPressBanner ... }) {
   return (
       <View>
           <TouchableOpacity onPress={onPressBanner}>
              <Image uri={banner?.uri} style={styles.banner} />
           </TouchableOpacity>

           ... repeat for others
       </View>
   );
}

It seems unprofessional code, in my opinion, and there might be a way to make it simpler, with less props and more generalization. Any ideas?

react-native reactjs refactoring javascript
1 Answers

I will extend the comment:

You either want to create the functions inside the Collage component (rather than receive them as props)

Or have an array of images sent to View component. Something like:

function Collage({ images }) {
   return (
       <View>
           images.map(image => (
             <Image key={`collage-image-${image.type}`} uri={image.uri} style={styles[image.type]} onClick={image.onClick} />
           )
       </View>
   );
}

where images is an array, each array element containing an uri, an type (which should be one of banner, square, portrait, poster in your case), and a click handler.

Warning: if you have multiple collages on the same page you might want to send some extra prop in order to ensure that you won't have two children with the same key

user_64296740
Related