ReactJs .map inside map I get only one is the last child of the array not the whole

Question

By passing every single projectsList object as prop in it's React component (named ProjectsItem) and then map it through so every project infos object in it's <li> tag inside that <ul>:

Error in the end

Intro.js file

Projects Lists (objects):

  const [frontEndProjects, setFrontEndProjects] = useState([{
    projectInfos: [{ name: "Imobile Shop", href: "" }],
    projectInfos: [{ name: "Portfolio template", href: "" }],
    projectInfos: [{ name: "Responsive Design Practice", href: "" }],
  }]);

  const [machineLearningProjects, setMachineLearningProjects] = useState([{ projectInfos: [{ name: "Hazel AI", href: "" }] }]);

  const [backEndProjects, setBackEndProjects] = useState([{
    projectInfos: [{ name: "My Little Market", href: "" }],
    projectInfos: [{ name: "Todo List app", href: "" }],
  }]);

  const [webScrapingProjects, setWebScrapingProjects] = useState([{
    projectInfos: [{ name: "Business list", href: "" }],
    projectInfos: [{ name: "Weather Scraper", href: "" }],
    projectInfos: [{ name: "Amazon Price Tracker (done deployement soon)", href: "" }],
  }]);

  const [javaScriptProjects, setJavaScriptProjects] = useState([{
    projectInfos: [{ name: "Javascript: Blackjack - Rock Paper Scissors", href: "" }],
    projectInfos: [{ name: "Instagram clone ReactJs", href: "" }],
    projectInfos: [{ name: "Facebook Messenger clone ReactJs", href: "" }],
    projectInfos: [{ name: "Netflix clone ReactJs", href: "" }],
    projectInfos: [{ name: "Amazon clone ReactJs", href: "" }],
    projectInfos: [{ name: "Tinder clone ReactJs ( Under Dev )", href: "" }],
    projectInfos: [{ name: "Youtube clone ReactJs (LIVE DEMO soon)", href: "" }],
    projectInfos: [{ name: "Spotify clone ReactJs (LIVE DEMO soon)", href: "" }],
  }]);
  
  const [dataScienceProjects, setDataScienceProjects] = useState([{
    projectInfos: [{ name: "Process workbook-Edting Excel files", href: "" }],
  }]);

and the same file

return (


            <ProjectsItem projects={frontEndProjects} />
            <ProjectsItem projects={machineLearningProjects} />
            <ProjectsItem projects={backEndProjects} />
            <ProjectsItem projects={webScrapingProjects} fadeOut />
            <ProjectsItem projects={javaScriptProjects} fadeOut />
            <ProjectsItem projects={dataScienceProjects} />

Then in the other file imported as props

function ProjectsItem(props) {
     <div className="project-inner-container">
        <ul>
          {props.projects.map((project) =>
            project.projectInfos.map((projectInfo) => 
              <li>{projectInfo.projectInfos.name}</li>))}
        </ul>
      </div>
}

it always shows only one project or it fires off an error when i go like

project.projectInfos.map is not a function

when i try to fix it by changing the .map place like

project.map((infos) => <li>{infos.projectInfos.name})

project.map is not a function

or

project.map((infos) => <li>{infos.name})

i've tried also adding 3rd map function for the names even i think a third one may fix it but don't know how to make it like the wording:

<ul>
{props.projects.map((project) =>
project.projectInfos.map((projectInfo) => 
projectInfo.map((name) => 
<li>{name}</li>)))}
</ul>

also no way it fires off

projectInfo.map is not a function

i've tried to summarize by giving a brief statement because the error is in the Map() in my opinion.

Appreciate also hints about the code and improvement tricks

Remove projectInfos in li tag. <li>{projectInfo.name}</li> — Ethan Doh
– Ethan Doh, Commented Nov 11, 2020 at 23:33
maybe can i add a third map function for the names like {projectInfo.projectInfos.map((name) => <li>name</li>)} is that logic even — MansouriAla
– MansouriAla, Commented Nov 11, 2020 at 23:44
In your current model, props.projects is an array so you need a map there. For each project, it has another array projectInfos so you need another map here. For each projectInfo, you don't have any array. From looking at your model, do you really need projectInfos array? All of them have single item. You can change projectInfos into an object called projectInfo then you can remove one map leaving only one map for your program. — Ethan Doh
– Ethan Doh, Commented Nov 12, 2020 at 2:33
Yeah actually it has two items "name" and "href" but for the sake of simplicity and to have a more readable code, hence why they are empty and by the way in my code also they are empty because i'm I'm tryna narrow the problem down and get rid of all distructions to focus on that excact problem. — MansouriAla
– MansouriAla, Commented Nov 13, 2020 at 4:55

Ethan Doh · Accepted Answer · 2020-11-13 05:54:00Z

  const [frontEndProjects, setFrontEndProjects] = useState([
    { name: "Imobile Shop", href: "" },
    { name: "Portfolio template", href: "" },
    { name: "Responsive Design Practice", href: "" },
  ]);

  const [machineLearningProjects, setMachineLearningProjects] = useState([
    { name: "Hazel AI", href: "" },
  ]);

  const [backEndProjects, setBackEndProjects] = useState([
    { name: "My Little Market", href: "" },
    { name: "Todo List app", href: "" },
  ]);

  const [webScrapingProjects, setWebScrapingProjects] = useState([
    { name: "Business list", href: "" },
    { name: "Weather Scraper", href: "" },
    { name: "Amazon Price Tracker (done deployement soon)", href: "" },
  ]);

  const [javaScriptProjects, setJavaScriptProjects] = useState([
    { name: "Javascript: Blackjack - Rock Paper Scissors", href: "" },
    { name: "Instagram clone ReactJs", href: "" },
    { name: "Facebook Messenger clone ReactJs", href: "" },
    { name: "Netflix clone ReactJs", href: "" },
    { name: "Amazon clone ReactJs", href: "" },
    { name: "Tinder clone ReactJs ( Under Dev )", href: "" },
    { name: "Youtube clone ReactJs (LIVE DEMO soon)", href: "" },
    { name: "Spotify clone ReactJs (LIVE DEMO soon)", href: "" },
  ]);
  
  const [dataScienceProjects, setDataScienceProjects] = useState([
    { name: "Process workbook-Edting Excel files", href: "" },
  ]);



function ProjectsItem(props) {
  <div className="project-inner-container">
    <ul>
      {props.projects.map((project) =>
        (<li>{project.name}</li>))}
    </ul>
  </div>
}

This should do it. I removed projectInfos because it's not needed here but if you need it for some reason,

[
  { projectInfo: { name: "name1", href: "" } },
  { projectInfo: { name: "name2", href: "" } },
]

{props.projects.map((project) =>
  (<li>{project.projectInfo.name}</li>))}

will do it.

actually i don't need that projectInfo i got revenge of it let's get rid of that, Huuuge thanks buddy You saved my journey. 🚀

Collectives™ on Stack Overflow

ReactJs .map inside map I get only one is the last child of the array not the whole

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related