Having trouble resolving this issue: Receiving a Javascript error stating that a comma was expected

Question

Having trouble resolving this issue: Receiving a Javascript error stating that a comma was expected

I am encountering an issue with my array.map() function and I'm struggling to identify the problem

const Websiteviewer = ({ web, content, styles, design }) => {



const test = ['1' , '2']
  return (
      {test.map(item => {
        console.log(item);
      } )}
  ) 
}

export default Websiteviewer

This is a react component where I'm facing the following error ->

[{ "resource": "/c:/path/WebsiteViewer.js", "owner": "typescript", "code": "1005", "severity": 8, "message": "',' expected.", "source": "ts", "startLineNumber": 18, "startColumn": 12, "endLineNumber": 18, "endColumn": 13 }]

Here is an image of the error

If you have any suggestions on how to resolve this issue, thank you in advance.

javascript next.js jsx

Answer 1

Answer №1

A common mistake is logging values inside JSX syntax, but you can avoid this by following these steps:

const WebsiteViewer = ({ web, content, styles, design }) => {
  const test = ["1", "2"];
  return (
    <>
      {test.map((item) => {
        console.log(item);
      })}
    </>
  );
};

export default WebsiteViewer

Answer 2

A common mistake is logging values inside JSX syntax, but you can avoid this by following these steps:

const WebsiteViewer = ({ web, content, styles, design }) => {
  const test = ["1", "2"];
  return (
    <>
      {test.map((item) => {
        console.log(item);
      })}
    </>
  );
};

export default WebsiteViewer

Answer 3

Answer №2

To properly handle your item within a fragment or div is crucial as only JSX can be returned in JSX files. Avoid logging values inside the return statement of JSX, as it is considered a poor practice.

const Websiteviewer = ({ web, content, styles, design }) => {
  const test = ["1", "2"];
  return (
    <>
      {test.map((item) => {
        console.log(item);
      })}
    </>
  );
};

export default Websiteviewer

Answer 4

To properly handle your item within a fragment or div is crucial as only JSX can be returned in JSX files. Avoid logging values inside the return statement of JSX, as it is considered a poor practice.

const Websiteviewer = ({ web, content, styles, design }) => {
  const test = ["1", "2"];
  return (
    <>
      {test.map((item) => {
        console.log(item);
      })}
    </>
  );
};

export default Websiteviewer

Having trouble resolving this issue: Receiving a Javascript error stating that a comma was expected

Answer №1

Answer №2

Similar questions

Is it possible to conceal the dates from past months in the datepicker plugin?

`How can I activate caching for getServerSideProps in Next.js?`

The functionality of the onclick button input is not functioning properly in the Google

Verify the form data before triggering the ajax call with just one click

Is it possible for me to convert my .ejs file to .html in order to make it compatible with Node.js and Express?

The submit button is not reading the JavaScript file for validation and instead goes directly to my PHP file

If the user decides to change their answer, the current line between the two DIVs will be removed

Why is my "webpack" version "^5.70.0" having trouble processing jpg files?

I am not seeing a single cookie in my Next.Js frontend

Attach the element to the bottom of the viewport without obstructing the rest of the page

Guide on sending server action form data to API request in Next.js

VueJS1 flexible $parent.$parent method duration

Utilizing jQuery and AJAX for submitting multiple POST requests

Trouble with AngularJS Smart Table when dealing with live data streams

Dynamic scrolling feature for lists that moves horizontally

What are the benefits of fetching user data and storing it in the Context API with each request in Next.js?

Utilize prop-types inheritance when a component is rendered via props

What is the impact of memory on NodeJS performance?

What is the best way to patiently wait for lines to be printed out one by one

The AutoComplete feature of MaterialUI Component fails to function properly even when there is available data