The JSX function seems to be malfunctioning, as the function part is not displaying on the webpage as intended

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;

Answer №1

Make sure to include a return statement in your JSX code. It seems like you overlooked adding it in your method. Adjust your code as shown below.

const newsArticle = (heading, subTitle) => {
  return (
    <div className="widgets__article">
      <div className="widgets__articleLeft">
        <FiberManualRecordIcon />
      </div>
      <div className="widgets__articleRight">
        <h2>{heading}</h2>
        <p>{subTitle}</p>
      </div>
    </div>
  );
};

If you wish to return JSX, consider creating a component for better organization. Below is a link to the sandbox with components included.

https://codesandbox.io/s/reverent-dhawan-lidx6o?fontsize=14&hidenavigation=1&theme=dark

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Include an extra hyperlink in the adaptive menu bar

I have successfully created a responsive Navigation bar. Now, I would like to add an "Account" link on the right side of the navigation. My initial thought was to insert a div into a ul element, but I realize that this may not be W3C compliant. <div c ...

Acquire JSON data structures using Node.js

I've been struggling to find a solution using just keywords - endless scrolling, yet all I can find are tutorials on getting data from JSON structure, rather than getting data structure from JSON. If you're unsure what my end goal is, here are s ...

AJAX list refresh, fetch additional items and tally

Looking for a solution to update the values of listUsernames and numUsernames after adding an item? Check out this scenario: <ul id='usernameList'> <li class='username'>John</li> <li class='username&apo ...

What is the best way to reassign key-value pairs in JSON mapping using JavaScript/TypeScript?

Given {"a": {"name": "king", "firstname": "Thomas"},"b": {"age": "21"}} I'm exploring a simple way to convert it to {"name": "king","firstname": "Thomas","age": "21"} In the realm of Javascript/Angular. Any helpful suggestions are greatly appreci ...

Exploring the possibilities of using AngularJS for AJAX functionality in a Ruby On Rails

I recently started learning AngularJS and Rails, and I attempted to develop a Rails application incorporating AngularJS. Currently, I am looking to make a POST request to send data and insert it into the database. In the Activity Controller: def create ...

Enhance Your Wordpress Site with jQuery TimeEntry Plugin

I am currently working on integrating a Time range field into my Wordpress page. Can someone please guide me on where to insert the code and how to display the range text box on my page? $('.timeRange').timeEntry({beforeShow: customRange}); f ...

Tips for implementing React JS event handling for scrolling to load additional data

On a single webpage, I have a collection of data consisting of 100 items. Currently, all 100 items load simultaneously when the page loads. However, I would like to implement a feature where the next set of data is loaded only after scrolling down on the ...

Pause a YouTube video automatically when the window is not in focus using FancyBox

I have successfully implemented dynamic play/pause functionality for a YouTube video, as demonstrated in my weave. However, I am facing challenges in making it work dynamically with FancyBox using the onBlur event (to pause the video when the window is no ...

JQuery selecting and highlighting a row within a dynamically loaded table via ajax

On a webpage, there are two tables being displayed. The first table loads along with the entire page, while the second table is loaded later on using ajax. Each row in both tables contains links. Upon clicking a link, the corresponding row in the table ...

Arranging the placement of the dropdown menu

I am struggling with positioning the items in my dropdown menu. The functionality itself is working perfectly, but the issue arises when it comes to aligning the dropped down items. Initially, I positioned them based on a smaller screen size, but when view ...

Reset the form value in React using Material UI components

Currently, I am working with React Material and hooks, attempting to reset a material form. However, despite my efforts to adjust the state, I am not seeing any changes reflected. <form className="create-account-form" autoComplete="off" onSubmit={onSub ...

The Vue and Element popover feature is unable to modify the current page

After hiding the popover and reopening it, it seems that the value of currentPage remains unchanged. Below is the HTML CODE: <el-popover placement="bottom" trigger="click" title="网段详情" @hide="popoverHide"> <el-table :data="in ...

Instructions on invoking a function from one controller within another controller

Is it possible to invoke a function from one controller in another controller? I attempted the following but encountered failure: <div ng-app="MyApp"> <div ng-controller="Ctrl1"> <button ng-click="func1()">func1</button> ...

Can you guide me on how to export a named function using module.exports?

I have a script file for my discord bot that includes a specific command and a function with parsing logic that I want to reuse in my main index.js // File: ./commands/scrumPrompt.js // The function const extractDeets = function (f, scrum) { let items ...

Challenge with Sequelize Many-to-Many Query

Currently, I am facing an issue with connecting to an existing MySQL database using Sequelize in Node. The database consists of a products table, a categories table, and a categories_products table. My goal is to fetch products, where each product includes ...

Looking to streamline your design? Find out how to translate multiple elements to the same position seamlessly

Greetings! This is my debut post on this platform. I am currently engrossed in a project that has presented me with a challenge, and I'm reaching out to seek your insights on a potential solution. Here's the scenario: I have a parent div containi ...

Dynamically remove values from other fields in a React Formik form based on checkbox conditions

Currently, I am utilizing react-formik for my form implementation. I have encountered an issue with checkbox-based conditions where the checked status of a checkbox determines whether two hidden fields are displayed or hidden. If the user checks the checkb ...

Completing a third-party htaccess file

What's the best way to create a nodejs script that periodically monitors a 3rd-party website, but encounters issues with a username and password prompt generated by .htpasswd/.htacces authentication? How can nodejs handle this situation? ...

Implement two useState hooks in React, where the value of one depends on the value of

Utilizing two useState hooks, one for object A to initialize object B, is my current approach. However, I am encountering an issue where my render function detects an empty B array, resulting in a brief white screen display. Removing the initialization on ...

Enhance Navbar functionality in Next.js to dynamically update when switching to a different route

Objective: Customizing the Navbar accent based on the active page Current Issue: The Navbar accent is not updating in real-time when navigating between pages. It only updates to the last visited page instead of dynamically changing as per the current page ...