How group props and propTypes to reduce code-CodePudding

I have football app in React, where each league is seperate view. All leagues are similar and have the same propTypes and pass the same variables (but with different values) to component below. How to avoid code duplication? Is good idea to pull out these props and propTypes to external file?

    const PremierLeague = (props) => {

  const {highlights, areHighlightsLoading, haveHighlightsError, standings, areStandingsLoading, haveStandingsError, scorers, areScorersLoading, haveScorersError} = props;
  const competitionName = 'ENGLAND: Premier League';
  const leagueName = 'Premier League';
  const flagUrl = 'https://upload.wikimedia.org/wikipedia/en/a/ae/Flag_of_the_United_Kingdom.svg';
  const alt = 'Flag of United Kingdom';

(...)
    
  return (
    <div>
      <League 
        highlights={highlights} 
        areHighlightsLoading={areHighlightsLoading}
        haveHighlightsError={haveHighlightsError}
        areStandingsLoading={areStandingsLoading}
        haveStandingsError={haveStandingsError}
        scorers={scorers}
        areScorersLoading={areScorersLoading}
        haveScorersError={haveScorersError}
        competitionName={competitionName} 
        leagueName={leagueName} 
        flagUrl={flagUrl} 
        alt={alt}
        table={table}
        tableKey={tableKey}
      />
    </div>
  );
};

PremierLeague.propTypes = {
  highlights: PropTypes.array,
  areHighlightsLoading: PropTypes.bool,
  haveHighlightsError: PropTypes.bool,
  standings: PropTypes.array,
  areStandingsLoading: PropTypes.bool,
  haveStandingsError: PropTypes.bool,
  scorers: PropTypes.array,
  areScorersLoading: PropTypes.bool,
  haveScorersError: PropTypes.bool,
};

CodePudding user response：

Why don't try this? propTypes is an object and you can destructrue an object with general proptypes like this:

const footbalProps = {
  highlights: PropTypes.array,
  areHighlightsLoading: PropTypes.bool,
  haveHighlightsError: PropTypes.bool,
  standings: PropTypes.array,
}

export {footbalProps}

import {footballProps} from './footballProps';

(...)

PremierLeague.propTypes = {
  ...footballProps,
  areStandingsLoading: PropTypes.bool,
  haveStandingsError: PropTypes.bool,
  scorers: PropTypes.array,
  areScorersLoading: PropTypes.bool,
  haveScorersError: PropTypes.bool,
};

Inreference to props propagation between components you can destructure props too

const PremierLeague = (props) => {

  const competitionName = 'ENGLAND: Premier League';
  const leagueName = 'Premier League';
  const flagUrl = 'https://upload.wikimedia.org/wikipedia/en/a/ae/Flag_of_the_United_Kingdom.svg';
  const alt = 'Flag of United Kingdom';
    
  return (
    <div>
      <League 
        {...props}
        competitionName={competitionName} 
        flagUrl={flagUrl} 
        alt={alt}
        table={table}
        tableKey={tableKey}
      />
    </div>
  );
};