How do you loop through json with map and filter in React?

Question

I have data in json format and I want to loop through it to render the same component (ContentThumbnail) eight times but with different titles and other content.

I have tried creating a function which accepts four parameters to achieve this. Here is the function I've written in a separate file called RenderContent.js:

import React from 'react';
import ContentThumbnail from './ContentThumbnail';

function RenderContentThumbnail(data, sectionName, wrapperStart, wrapperEnd) {
  return (
    <div>
      {data
        .filter(d => d.sectionName === { sectionName })
        .map(filteredSection => (
          {wrapperStart}
          <ContentThumbnail {filteredSection.title} />
          {wrapperEnd}
        ))}
    </div>
  );
}
export default RenderContentThumbnail;

And here is where I'm trying to execute that function in my component DefaultDashboard.js:

import React, { useEffect } from 'react';
import RenderContent from '../../content-thumbnail/RenderContent';


    const DefaultDashboard = () => {
    const { data } = useFetchData({ queryString: `${contentLibraryApiUrl}/GetContentForPage/Home` });
    
     return (
        RenderContentThumbnail(data, "topSection", "<div>", "</div>")
      );
    };
    
    export default DefaultDashboard;

Is anyone able to help me see where I'm going wrong? I'm getting errors inside my map function and the page won't render at all.:(

Many thanks!

Katie

UPDATE!

I have made a tweak to the code to specify the prop, which is called "title", but I'm getting the following:

You should return <RenderContent {...props} />, not calling as a function — lissettdm
– lissettdm, Commented Nov 28, 2020 at 16:56
actually when you do <RenderContent {...props} /> you are invoking RenderContent function but with jsx syntax. It's another way, but I agree that's you should stick with jsx approach. — Rafael Buzatto de Campos
– Rafael Buzatto de Campos, Commented Nov 28, 2020 at 17:09

lissettdm · Accepted Answer · 2020-11-28 16:58:28Z

1

You should change the way you are rendering RenderContent:

const DefaultDashboard = () => {
    const { data } = useFetchData({ queryString: `${contentLibraryApiUrl}/GetContentForPage/Home` });
        
    return (
        <RenderContent data={data} sectionName="topSection" wrapperStart="<div>" wrapperEnd= "</div>")
    );
 };

answered Nov 28, 2020 at 16:58

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

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

4 Comments

Rafael Buzatto de Campos Over a year ago

there is another mistake at RenderContentThumbnail. he is not destructuring props as he should have. RenderContentThumbnail(data, sectionName, wrapperStart, wrapperEnd)

Katie7 Over a year ago

This is great, thank you - I was being stupid! Even with this, I still get an error, and as buzatto has pointed out I think that's because I still have an error in my RenderContent function. Is there any chance of getting help with how to destructure? I'm quite new to React! Thanks

lissettdm Over a year ago

@Katie7, you should change this <ContentThumbnail {filteredSection.title} />. What property do you want to set in ContentThumbnail with {filteredSection.title}?, for example: <ContentThumbnail title={filteredSection.title} />??

Katie7 Over a year ago

Thanks lissettdm - you're right, I have forgotten to specify the prop. I have changed it to this: <ContentThumbnail title={filteredSection.title} /> but I'm still getting an error. The linting is underlining the title in the above and saying: ") expected" . I will update my post with a screenshot of the linting!

lifeisfoo · Accepted Answer · 2020-11-28 17:01:59Z

0

You can make it a lot easier, removing RenderContentThumbnail:

const DefaultDashboard = () => {
    const { data } = useFetchData({ queryString: `${contentLibraryApiUrl}/GetContentForPage/Home` });
    
    return (
        {data
            .filter(d => d.sectionName === "topSection")
            .map(filteredSection => (<div>
                <ContentThumbnail title={filteredSection.title} />
                </div>))
          }
    );
};

export default DefaultDashboard;

answered Nov 28, 2020 at 17:01

lifeisfoo

16.6k6 gold badges80 silver badges128 bronze badges

1 Comment

Katie7 Over a year ago

Thanks lifeisfoo! This will be useful in future, but in reality I want to reuse this same RenderContentThumbnail function in lots of places. Also, I am still getting the error because I think the problem lies in RenderContentThumbnail.

Collectives™ on Stack Overflow

How do you loop through json with map and filter in React?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related