i want to show fake user infomation

Question

i want to show fake user infomation on screen, so i used faker.js. I made fake users infomation, put it in suggestions state, and give the Story component and then i was tying to show user info on screen using map function, but it couldn't be.

this is my 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;

i checked user info at 'suggestion'. it's no problem.

my english is not good, so thanks for read my question.

What's happening instead? Is there an error? Does the rest of the story work? — Emile Bergeron, Oct 26 '21 at 21:31
Doesn't have any error in console.. but everything is okay. just cannot showing the map function. i am following this insta clone coding 'https://www.youtube.com/watch?v=a6Xs2Ir40OI' 1:41:27... I can't move forward. ㅠ-ㅠ — , Oct 27 '21 at 15:13
I found this "Because a cookie’s SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery." that is the problem i think, right?? — , Oct 27 '21 at 15:32
What the.... ㅠㅠ, it's not a big deal... Thank you so much! and i love you — , Oct 27 '21 at 15:55

score 1 · Answer 1 · answered Oct 28 '21 at 16:27

As @Emile Bergeron stated in the comments, the .map function isn't returning the Story element as you're expecting.

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

Change that to:

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

Or replace the arrow function brackets with parentheses (implicit returns):

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

i want to show fake user infomation

1 Answers1