I would like to know why my "topbar" is duplicated when I only want one. And it's since I did my import of the user image via axios and added the .map in the return. I really don't understand why if someone could help me that would be nice. Thanks in advance

import "./topbar.css"
import { Search } from '@mui/icons-material'
import { useState, useEffect, Fragment } from 'react'
import axios from "axios"


function Home() {

const [user, setPosts] = useState([])



useEffect(() => {
    console.log("chargement ok")
    const fetchData = async () => {
    const result = await axios.get(
    'http://localhost:4200/api/user/')
    setPosts(result.data)
    }
    fetchData();
}, [])


    return (
        <Fragment>
            { user
            ? user.map((users,topbar) => ( <div key={topbar} className="topBarContainer">
                            <div className="topBarLeft">
                                <span className="logo">Groupomania</span>
                            </div>
                            <div className="topBarCenter">
                                <div className="searchBar">
                                    <Search className="searchIcon" />
                                    <input placeholder="Vous cherchez quelque chose ?" className="searchInput" />
                                </div>
                            </div>
                            <div className="topBarRight">
                                <div className="topBarLinks">
                                    <span className="topBarLink">Page d'acceuil</span>
                                    <span className="topBarLink">Deconnexion</span>
                                </div>
                                <img src={users.picture} alt="Photo de profil de l'utilisateur" className="topBarImg" />
                            </div>
                        </div>))
                    : (<p></p>)
            }
        </Fragment>
        )
}
    
export default Home

CodePudding user response：

I'm not sure why, but it may be because of your key. Some patterns to fix first:

• const [user, setPosts] = useState([]) -> const [posts, setPosts] = useState([])
• you don't have to use the word Fragment: -> <>
• Normally in a .map params are used like this posts.map((post, index) => ...)
• posts ? post.map(...) : null

Edit: of course you have to remove your topbar from your .map(...)

Now try with a better key than "topbard" that is the index in the array ... try post.id that should be uniq

Edit solution:

import "./topbar.css";
import { Search } from "@mui/icons-material";
import { useState, useEffect, Fragment } from "react";
import axios from "axios";

function Home() {
  const [user, setUser] = useState();

  useEffect(() => {
    console.log("chargement ok");
    const fetchData = async () => {
      const result = await axios.get("http://localhost:4200/api/user/");
      setUser(result.data);
    };
    fetchData();
  }, []);

  return (
    <div className="topBarContainer">
      <div className="topBarLeft">
        <span className="logo">Groupomania</span>
      </div>
      <div className="topBarCenter">
        <div className="searchBar">
          <Search className="searchIcon" />
          <input
            placeholder="Vous cherchez quelque chose ?"
            className="searchInput"
          />
        </div>
      </div>
      <div className="topBarRight">
        <div className="topBarLinks">
          <span className="topBarLink">Page d'acceuil</span>
          <span className="topBarLink">Deconnexion</span>
        </div>
        {user && <img
          src={user.picture}
          alt="Photo de profil de l'utilisateur"
          className="topBarImg"
        />}
      </div>
    </div>
  );
}

export default Home;

CodePudding user response：

As the map is rendering the topbar for every user, you get as many topbars as there are users. The map function should be inside the top bar container div.

<div key={key} className="topBarContainer">
  { user.map(...) }
</div>

CodePudding user response：

This is because your are making the topbar inside the loop,So you are getting a topbar per user.