Je veux montrer de fausses informations sur l'utilisateur

Question

Je veux montrer de fausses informations sur l'écran, donc j'ai utilisé faker.js. J'ai créé de fausses informations sur l'utilisateur, je les ai mises dans un état de suggestions et j'ai donné le composant Story. et ensuite j'ai essayé d'afficher les informations de l'utilisateur à l'écran en utilisant la fonction map, mais ça n'a pas marché.

Voici mon code

import faker from "faker";

import { useEffect, useState } from "react";
import Story from "./Story";

const Stories = () => {
  const [suggestions, setSuggestions] = useState([]);

  useEffect(() => {

    const suggestion = [...Array(20)].map((_, i) => ({
      ...faker.helpers.contextualCard(),
      id: i,
    }));
    setSuggestions(suggestion);
  }, []);

  return (
    <div>
      {suggestions.map((profile) => {
        <Story
          key={profile.id}
          img={profile.avatar}
          username={profile.username}
        />;
      })}
      {/* story */}
      {/* story */}
      {/* story */}
      {/* story */}
      {/* story */}
    </div>
  );
};

export default Stories;

import React from "react";

const Story = ({ img, username }) => {
  return (
    <div>
      hihi
      <img src={img} alt="" />
      <p>{username}</p>
    </div>
  );
};

export default Story;

J'ai vérifié les informations sur l'utilisateur dans la rubrique "suggestion". Il n'y a aucun problème.

mon anglais n'est pas bon, donc merci de lire ma question.

Answer 1

Comme @Emile Bergeron indiqué dans les commentaires, le .map ne renvoie pas la fonction Story élément que vous attendez.

{suggestions.map((profile) => {
  <Story
    key={profile.id}
    img={profile.avatar}
    username={profile.username}
  />;
})}

Changez ça en :

{suggestions.map((profile) => {
  return <Story
    key={profile.id}
    img={profile.avatar}
    username={profile.username}
  />;
})}

Ou remplacez les crochets de la fonction flèche par des parenthèses (retours implicites) :

{suggestions.map((profile) => (
  <Story
    key={profile.id}
    img={profile.avatar}
    username={profile.username}
  />
))}