TypeError: user is undefined

Jadi gini, saya mau me map data yang ada di state saya tetapi parameter user di function saya tidak membaca data dari state

ini File Component saya:

import React,{useState} from 'react'
import { ProfileData } from './Data'

const Profile = () => {
  const [user, setUser] = useState(ProfileData);

  //param yang saya maksud V yang mana harus nya mengarah ke state
  const UserProfile = ({ user }) => {
    return (
      <>
        {user.map((info) => {
          const { id, username, img, banner, recipe, liked } = info;
          return (
            <>
              <Image className="banner-img" src={banner} />
              <div className="text-center">
                <Image src={img} className="profile-img" roundedCircle></Image>
                <h5>{username}</h5>
                <Button variant="outline-dark" className="rounded-pill m-2">
                  Edit your profile
                </Button>
                <Container>
                  <Row>
                    <Col>
                      <h3>{recipe}</h3>
                      <h5>Recipe created</h5>
                    </Col>
                    <div className="line"></div>
                    <Col>
                      <h3>{liked}</h3>
                      <h5>Liked Recipe</h5>
                    </Col>
                  </Row>
                </Container>
                <hr />
             </div>
            </>
          );
        })}
      </>
    );
  };
    return (
        <>
            <UserProfile />
        </>
    )
}

export default Profile;

dan ini file data,js saya

const ProfileData = [
  {
    id: 1,
    banner:
      "https://i.pinimg.com/originals/d3/6d/46/d36d462db827833805497d9ea78a1343.jpg",
    img: "https://static.zerochan.net/Akiyama.Mio.full.415518.jpg",
    email: "iniemail@gmail.com",
    username: "@iniusername",
    recipe: 5,
    liked: 6,
  },
];
export default ProfileData;
avatar Basneg
@Basneg

4 Kontribusi 5 Poin

Diperbarui 2 tahun yang lalu

1 Jawaban:

Jawaban Terpilih

<div>Parameter user yang digunakan di fungsi ini :</div><pre>const UserProfile = ({ user }) =&gt; { ...............</pre><div>tidak mengambil user dari sini :</div><pre>const [user, setUser] = useState(ProfileData);</pre><div>Coba ubah variable di UserProfile, kemudian set parameternya menjadi user seperti ini :</div><pre>const [user, setUser] = useState(ProfileData);

// user diubah menjadi param const UserProfile = ({ param }) =&gt; { // panggil value user ke dalam param param = user return ( &lt;&gt; {param.map((info) =&gt; { const { id, username, img, banner, recipe, liked } = info; return ( ...............</pre>

avatar mudziahutama
@mudziahutama

18 Kontribusi 4 Poin

Dipost 2 tahun yang lalu

Login untuk ikut Jawaban