What is best way or best practice to map 3 or more arrays at the same time?

for this example:

At first I filter data by team name then map through them for showing them

(In this example I want use the <div key={index} className={styles.member}> .... </div> just one time for coding less because they are totaly same)

--Yoe are free to change filter or map method in codes--

function MyApp() {
  const managementTeam = members.filter((m) => m.team === "management");
  const developmentTeam = members.filter((m) => m.team === "development");
  const uxTeam = members.filter((m) => m.team === "UX");
  const contentTeam = members.filter((m) => m.team === "content");

  const development = developmentTeam.map((m, index) => (
    <div key={index} className={styles.member}>
      <figure>
        <img className="image-cover" src={m.image} alt={m.faName} />
      </figure>
      <div className={styles.info}>
        <h3>{m.faName}</h3>
        <div className={styles.titleWrapper}>
          <div
            className={styles.snackItem}
            style={{ backgroundColor: m.background }}>
            {m.position}
          </div>
        </div>
      </div>
    </div>
  ));

  const management = managementTeam.map((m, index) => (
    <div key={index} className={styles.member}>
      <figure>
        <img className="image-cover" src={m.image} alt={m.faName} />
      </figure>
      <div className={styles.info}>
        <h3>{m.faName}</h3>
        <div className={styles.titleWrapper}>
          <div
            className={styles.snackItem}
            style={{ backgroundColor: m.background }}>
            {m.position}
          </div>
        </div>
      </div>
    </div>
  ));

  const ux = uxTeam.map((m, index) => (
    <div key={index} className={styles.member}>
      <figure>
        <img className="image-cover" src={m.image} alt={m.faName} />
      </figure>
      <div className={styles.info}>
        <h3>{m.faName}</h3>
        <div className={styles.titleWrapper}>
          <div
            className={styles.snackItem}
            style={{ backgroundColor: m.background }}>
            {m.position}
          </div>
        </div>
      </div>
    </div>
  ));

  const content = contentTeam.map((m, index) => (
    <div key={index} className={styles.member}>
      <figure>
        <img className="image-cover" src={m.image} alt={m.faName} />
      </figure>
      <div className={styles.info}>
        <h3>{m.faName}</h3>
        <div className={styles.titleWrapper}>
          <div
            className={styles.snackItem}
            style={{ backgroundColor: m.background }}>
            {m.position}
          </div>
        </div>
      </div>
    </div>
  ));

  return (
    <div className={styles.wrapper}>
        <div className={styles.membersWrapper}>
          <div>{management}</div>
          <div>{development}</div>
          <div>{ux}</div>
          <div>{content}</div>
        </div>
    </div>
  );

CodePudding user response：

A lot of these answers are good and clear, but I don't like that they all use multiple iterations over the array when you can do it all in one sweep, with reduce. Example:

const Team = ({ image, faName, background, position }) => (
  <div className={styles.member}>
    <figure>
      <img className="image-cover" src={image} alt={faName} />
    </figure>
    <div className={styles.info}>
      <h3>{faName}</h3>
      <div className={styles.titleWrapper}>
        <div
          className={styles.snackItem}
          style={{ backgroundColor: background }}
        >
          {position}
        </div>
      </div>
    </div>
  </div>
);

export default function App() {
  const teams = members.reduce((acc, current, index) => {
    const team = current.team;
    const content = <Team key={index} {...current} />;

    if (team in acc) {
      acc[team].push(content);
    } else {
      acc[team] = [content];
    }
    return acc;
  }, {});

  console.log(teams);

  return (
    <div className={styles.wrapper}>
      <div className={styles.membersWrapper}>
        <div>{teams.management}</div>
        <div>{teams.development}</div>
        <div>{teams.ux}</div>
        <div>{teams.content}</div>
      </div>
    </div>
  );
}

If you need to make every team different and can't use one component then you could just create individual components and use switch statement instead of if (team in acc) or you could use object and key-value pairs.

CodePudding user response：

Make a array that contains the three arrays:

const arr = [ [ /* first array */ ], [ /* second array */ ], [ /* third array */ ] ]
arr.forEach(x=>{
    x.map( /* map content for each array */ )
}

CodePudding user response：

I would do something like this below.

Note: It is not a performant solution as it loop through the members array for each teams items. Only good for small size of data.

function MyApp() {
    const component = team =>
        members
            .filter(m => m.team === team)
            .map((m, index) => (
                <div key={index} className={styles.member}>
                    <figure>
                        <img
                            className="image-cover"
                            src={m.image}
                            alt={m.faName}
                        />
                    </figure>
                    <div className={styles.info}>
                        <h3>{m.faName}</h3>
                        <div className={styles.titleWrapper}>
                            <div
                                className={styles.snackItem}
                                style={{ backgroundColor: m.background }}
                            >
                                {m.position}
                            </div>
                        </div>
                    </div>
                </div>
            ));

    const teams = ["management", "development", "UX", "content"];

    return (
        <div className={styles.wrapper}>
            <div className={styles.membersWrapper}>{teams.map(component)}</div>
        </div>
    );
}