How to map local array in React card component using Typescript?

Question

I have Interfaces like this:

interface INewsProps {
  newsType: string;
  data: INewsContentProps[];
}

interface INewsContentProps {
  title: string;
  newsContent: string;
}

My array is this:

  export const newsList: INewsContentProps[] = [
  {
    title: 'Lorem ipsum',
    newsContent: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit dui ac accumsan consequat.'
  },
  {
    title: 'Lorem ipsum2',
    newsContent: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit dui ac accumsan consequat.'
  }
];

I need to get properties from the array to show here:

export const NewsCard = () => {
  return (
     <div>
        <Card>
          <CardActionArea>
            <CardContent>
              <Typography>
                {props.title} 
              </Typography>
               <Typography>
                {props.newsContent} 
              </Typography>
              <ContextMenu />
            </CardContent>
          </CardActionArea>
        </Card>
     </div>
  );
};

I am new in React and also in TypeScript so I will be very grateful if someone can help me with this.

Note that JSON is a text format, like XML or CSV. The list you show is just an array of objects. Nothing JSON about it. — Heretic Monkey
– Heretic Monkey, Commented Mar 15, 2021 at 21:42
Does this answer your question? Loop through simple array of objects in React — Heretic Monkey
– Heretic Monkey, Commented Mar 15, 2021 at 21:46

Aaron · Accepted Answer · 2021-03-15 21:47:22Z

2

Unsure if you want a card per entry in your array but you want to make use of Array's map() function like so:

export const NewsCard = (newsItem) => {
  return (
     <div>
        <Card>
          <CardActionArea>
            <CardContent>
              <Typography>
                {newsItem.title} 
              </Typography>
               <Typography>
                {newsItem.newsContent} 
              </Typography>
              <ContextMenu />
            </CardContent>
          </CardActionArea>
        </Card>
     </div>
  );
};

return newsList.map(newsItem => NewsCard(newsItem));

This will map each element in your array to a <Card> element where each entry in the array is accessed by newsItem. I hope this is what you wanted!

edited Mar 15, 2021 at 21:47

answered Mar 15, 2021 at 21:40

Aaron

1616 bronze badges

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

2 Comments

Aaron Over a year ago

Glad this is what you’re looking for - I can’t immediately see why you’re getting that error so I might need more code to aid with that! It sounds like your news card function is not returning any JSX as expected?

Aaron Over a year ago

Glad you got it working Fresh! Don’t forget to mark the answer as correct and upvote it!

Rajiv Punjabi · Accepted Answer · 2021-03-15 21:59:31Z

2

To render multiple elements you can use .map() function for arrays. Your NewsCard component should accept an argument as props to access props.title and props.newsContent.

return newsList.map((content, ix) => (
    <NewsCard
      key={ix + content.title}
      title={content.title}
      newsContent={content.newsContent}
    />
  ));

You can refer this working demo on Codesandbox

answered Mar 15, 2021 at 21:59

Rajiv Punjabi

5223 silver badges6 bronze badges

Comments

Suhail · Accepted Answer · 2021-03-15 22:06:12Z

You can use NewsCard as component. Lets say that

export const NewsCard = (props) => {
  return (
     <div>
        <Card>
          <CardActionArea>
            <CardContent>
              <Typography>
                {props.title} 
              </Typography>
               <Typography>
                {props.newsContent} 
              </Typography>
              <ContextMenu />
            </CardContent>
          </CardActionArea>
        </Card>
     </div>
  );
};

Now you have a component called NewsCard that taks props of type

{ title: string, newsContent: string | any }

Now you have a list of

{
    title: 'Lorem ipsum',
    newsContent: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit dui ac accumsan consequat.'
}

Lets say that you using App component to show the list of cards

function App(){

return (
    <>
    {newsList.map((cardListItem, index)=> <NewsCard key={`card-${index}`} title={cardListItem.title} newsContent={cardListItem.newsContent} /> )}
    </>
    );
}

assuming that NewsCard is in the same file otherwise you need to import it.

For more info please visit the Docs

Collectives™ on Stack Overflow

How to map local array in React card component using Typescript?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related