Map an array inside of an array

Question

I am trying to map an array inside of an array that I retrieve from firestore on the app initialization. Any ideas of what am I getting wrong? I am trying to map an inner array inside of the main array (the subarray I am trying to map is the "projects" array/object from below).

Screenshot of array that I am getting from Firestore can be found here:

I will post my code here:

<Container width="1080px">
      {response.map((array) => (
        <Container justifyContent="flex-start">
          <Organization>
            <Avatar src={avatar} />
            {array.organization}
          </Organization>

          {response.id.projects.map((project) => (
            <Project>
              <Thumbnail />
              <ProjectName>
                <ProjectYear>2020 &nbsp;•&nbsp; </ProjectYear>
                My Project Name
              </ProjectName>
            </Project>
          ))}
          ;
        </Container>
      ))}
      ;
    </Container>

This is how I fetch my data:

useEffect(() => {
firebase.db.collection('folders').onSnapshot((snapshot) => {
  const json = snapshot.docs.map((doc) => ({
    id: doc.id,
    ...doc.data(),
  }));

  setResponse(json);
  console.log(json);
});

}, []);

Ciao, I was answering more or less like the other guys but now I see that you commented "cannot read property map of undefined". Could you add your response array like a text and not like an image? — Giovanni Esposito
– Giovanni Esposito, Commented Aug 15, 2020 at 20:24

Yevhen Horbunkov · Accepted Answer · 2020-08-15 20:54:16Z

2

The error you're referring to is likely caused by your attempt to render empty array (having no nested arrays) upon initial render.

Try not setting initial value of response (i.e. const [response, setResponse] = useState()) and prepend JSX with the check whether your response already arrived before render.

And, of course, you need to use .map() properly:

return !!response.length && (<Container width="1080px">
      {response.map(({organization, projects, id}) => (
        <Container justifyContent="flex-start" key={id}>
          <Organization>
            <Avatar src={avatar} />
            {organization}
          </Organization>
          {!!projects.length && projects.map(({project_year, project_name}) => (
            <Project>
              <Thumbnail />
              <ProjectName>
                <ProjectYear>{project_year} &nbsp;•&nbsp; </ProjectYear>
                {project_name}
              </ProjectName>
            </Project>
          ))}
        </Container>
      ))}
</Container>
)

edited Aug 15, 2020 at 20:54

answered Aug 15, 2020 at 20:20

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Adam Schwarcz Over a year ago

TypeError: Cannot read property 'map' of undefined... This is the error I keep getting after every solution that is mentioned in this thread

Yevhen Horbunkov Over a year ago

@AdamSchwarcz : is this error triggered by the inner or outer map? If latter is the case, chances are that you may attempting to render your data before it actually arrives. Would you show wider code sample to see the part where you get data from firestore?

Adam Schwarcz Over a year ago

Hey I have added the useEffect in my main question

Adam Schwarcz Over a year ago

I think the problem is with the inner map

Adam Schwarcz Over a year ago

const [response, setResponse] = useState([]);

|

Giovanni Esposito · Accepted Answer · 2020-08-15 20:40:37Z

2

Ciao you could try something like:

{response && <Container width="1080px">
  {response.map((array) => (
    <Container justifyContent="flex-start">
      <Organization>
        <Avatar src={avatar} />
        {array.organization}
      </Organization>

      {array.projects.map((project) => (
        <Project>
          <Thumbnail />
          <ProjectName>
            <ProjectYear>2020 &nbsp;•&nbsp; </ProjectYear>
            My Project Name
          </ProjectName>
        </Project>
      ))}
      ;
    </Container>
  ))}
  ;
</Container> }

response && is used to avoid to render data before getting it from firebase. array.projects because I saw on your picture that projects is not in id.

EDIT

I made a small example to show that map is working:

let response = [{id: 1, organization: "org1", projects: [{project_year: "2020", project_name: "prj11"}, {project_year: "2020", project_name: "prj12"}]}, {id: 2, organization: "org2", projects: [{project_year: "2021", project_name: "prj21"}, {project_year: "2021", project_name: "prj21"}]}];

response.map((array) => {
   array.projects.map((project) => {
      console.log(project.project_year, project.project_name);
   })
})

I don't know, seems that the problem is elsewhere.

edited Aug 15, 2020 at 20:40

answered Aug 15, 2020 at 20:27

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

3 Comments

Adam Schwarcz Over a year ago

Still getting the same problem: TypeError: Cannot read property 'map' of undefined

Giovanni Esposito Over a year ago

@AdamSchwarcz I update my answer with a small example to show that map funciotn write in this way is working. Maybe the problem is elsewhere.

Adam Schwarcz Over a year ago

I see.. Sadly it doesnt help :( Still getting map of undefined

Cees Jol · Accepted Answer · 2020-08-15 20:20:57Z

0

You can map over the "array" variable.

<Container width="1080px">
  {response.map((array) => (
    <Container justifyContent="flex-start">
      <Organization>
        <Avatar src={avatar} />
        {array.organization}
      </Organization>

      {array.projects.map((project) => (
        <Project>
          <Thumbnail />
          <ProjectName>
            <ProjectYear>2020 &nbsp;•&nbsp; </ProjectYear>
            My Project Name
          </ProjectName>
        </Project>
      ))}
      ;
    </Container>
  ))}
  ;
</Container>

answered Aug 15, 2020 at 20:20

Cees Jol

261 silver badge2 bronze badges

Collectives™ on Stack Overflow

Map an array inside of an array

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related