Refactoriser une petite fonction utilisant lodash/fp map, et un second argument

Question

Je dispose d'un système lodash/fp map qui renvoie un composant, Lead . On lui passe une liste de leads (sur lequel j'itère), mais je veux aussi passer un id, que je passe dans chaque composant (même id dans chaque composant)

Je passe le tableau et la chaîne de caractères dans le composant :

<tbody>{renderLeads(leads, advisor.id)}</tbody>

et ma fonction renvoie un tableau mappé de pistes :

const renderLeads = map(({ node: lead }) => { <--- how do i pass advisor.id into this function
   return <Lead lead={lead} advisorId={advisorId} key={lead.id} />;
});

Comment ajouter l'accessoire advisor.id (le deuxième argument) dans cette carte ?

Answer 1

Vous pouvez utiliser le currying pour générer le callback de la carte avec l'option advisorId :

const renderLeads = pipe( // pipe is an alias of `_.flow()`
  advisorId => ({ node: lead }) => (
    <Lead lead={lead} advisorId={advisorId} key={lead.id} />
  ),
  map
);

Pour l'utiliser :

<tbody>{renderLeads(advisor.id)(leads)}</tbody>

Ejemplo:

const { pipe, map } = _;

const Lead = ({ lead, advisorId }) => (
  <div>{lead.txt} : {advisorId}</div>
);

const renderLeads = pipe(
  advisorId => ({ node: lead }) => (
    <Lead lead={lead} advisorId={advisorId} key={lead.id} />
  ),
  map
);

const Demo = ({ leads, advisor }) => (
  <div>{renderLeads(advisor.id)(leads)}</div>
);

const leads = [{ node: { id: 1, txt: 'lead-1' }}, { node: { id: 2, txt: 'lead-2' }}, { node: { id: 3, txt: 'lead-3' }}];

ReactDOM.render(
  <Demo leads={leads} advisor={{ id: '154' }} />,
  root
);

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<script src='https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js)'></script>

<div id="root"></div>