Home > Software design >  My topbar duplicates since adding axios and importing the user image with axios and react
My topbar duplicates since adding axios and importing the user image with axios and react

Time:06-08

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 enter image description here

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.

  • Related