This code snippet is a part of a React component in a project. I have imported a CSS file for styling and have already integrated Material UI. However, the function for the new article is not displaying on the webpage as expected.
import "./Widgets.css";
import InfoIcon from '@mui/icons-material/Info';
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
function Widgets() {
{/*Following BEM naming convention*/}
const newsArticle = (heading, subTitle) => {
<div className="widgets__article">
<div className="widgets__articleLeft">
<FiberManualRecordIcon/>
</div>
<div className="widgets__articleRight">
<h2>{heading}</h2>
<p>{subTitle}</p>
</div>
</div>
};
return (
<div className="widgets">
<div className="widgets__header">
<h2>LinkedIn News</h2>
<InfoIcon/>
</div>
{newsArticle("Some text","few text")}
{newsArticle("Some sentences","Some sentences")}
{newsArticle("Some sentences","Some sentences")}
{newsArticle("few text","few text")}
{newsArticle("few text","few text")}
{newsArticle("few text","few text")}
</div>
);
};
export default Widgets;