Can you partially apply a component to some props in React?

user_4077294 0
Viewed 68

I have 2 different components AnimeList and MangaList that share similar logic, so I want to share code between them. Here is how I'm currently doing it:

const AnimeList = (props) => <AnimangaList isAnime={true} {...props} />;
const MangaList = (props) => <AnimangaList isAnime={false} {...props} />;

return (
    <Tab.Navigator>
        <Tab.Screen name="Anime" component={AnimeList} />
        <Tab.Screen name="Manga" component={MangaList} />
    </Tab.Navigator>
);

Is there a shorter or more convenient way to do this in React / React Native? ie. Something similar to function.bind()? This feels pretty hefty.

react-native reactjs
1 Answers

I usually go with static array when I need to have different values for few properties on large amount of components.

const pages = [
  {
    isAnime: true,
    name: 'Anime',
  },
  {
    isAnime: false,
    name: 'Manga',
  },
];

// mocks for some components
const MangaList = ({ isAnime }) => <div>{isAnime}</div>;
const Screen = ({ name, component: Component }) => (
  <div>
    {name}
    <Component />
  </div>
);

And then inside Tab.Navigator:

{pages.map((p, i) => (
      <Screen key={i} name={p.name} component={(props) => <MangaList isAnime={p.isAnime} {...props} />} />
 ))}
user_73130940
Related