SPFX for showing list items as News items

john john 946 Reputation points

I have a custom list as follow:-


where i add links to pages + categorize them using a field named "Featured". now i want to show the above 3 list items as follow in a web part which looks similar to the News web part:-


So it should show the list item which has its Featured = "Featured New" on one column and the other 2 list items on another column...

now i created a new SPFx web part code for the 2 files as attached.

but this what i get on the above list (i added the same background image for testing purposes only):-


so not sure why 2 list items will be duplicated + the Featured News will not be shown... any advice how i can modify my code to show the Featured News list item on one column + the other 2 lists items on another column, as shown in the first picture? Thanks



A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
9,847 questions
SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
2,708 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. RaytheonXie_MSFT 32,156 Reputation points Microsoft Vendor

    Hi @john john ,
    I will recommend you News web part to list news items in sharepoint online. When you are working with a News web part, you can specify the source for your news posts. Your news posts can come from the site you are on while using the web part (This site), a hub site that the current site is part of (All sites in the hub), or one or more individual sites (Select sites). Another option is to choose Recommended for current user, which will display posts for the current user from people the user works with; managers in the chain of people the user works with, mapped against the user's own chain of management and connections; the user's top 20 followed sites; and the user's frequently visited sites.
    Please refer to following document

    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.