Map an array inside of an array

user_12956054 0
Viewed 1455

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:

enter image description 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);
});

}, []);

google-cloud-firestore reactjs mapping arrays javascript
3 Answers

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>
)
user_112990530

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.

user_138970650

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>
user_61817880
Related