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.

Answer 1

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!

Answer 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

Answer 3

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