Error while using if statement inside Map reactJS

Question

I am new to reactJS. I am implementing a Quiz page, where users can answer the questions and once they submit answers, the result is displayed. Following is the DisplayResult component which calculates the score and displays the result. I am getting error at the if statement. Checked the syntax multiple times, not sure if it is a syntax issue or if I am missing something. Could you please help.

import React from "react";
function DisplayResult(props) {
var score=0;
var Answers=[1947,1950];
props.data.map((dat, i) => 
    ({if (dat===Answers[i]) {score++}}
    ));
return<div>Your answers are {props.data[0]}, {props.data[1]} and your score is {score} </div>;

}
export default DisplayResult;

Below is the error I am getting: ./src/DisplayResult.jsx Line 8:14: Parsing error: Unexpected token, expected ","

6 | var Answers=[1947,1950]; 7 | props.data.map((dat, i) =>

8 | ({if (dat===Answers[i]) {score++}} | ^ 9 | )); 10 | returnYour answers are {props.data[0]}, {props.data[1]} and your score is {score} ;

Just a tip, try to use identention on your code, it make easy to you and others people to understand it. — William Rizzi
– William Rizzi, Commented Sep 10, 2020 at 13:22

Prateek Thapa · Accepted Answer · 2020-09-10 13:22:41Z

2

Use a forEach loop instead of .map.

By the way, you need to focus on the basics and fundamentals of React. Try going through basic tutorials on Youtube.

const Answers = [1947, 1950];

function DisplayResult(props) {
  let score = 0;

  props.data.forEach((data, i) => {
    if (data === Answers[i]) {
      score += 1;
    }
  });

  return (
    <div>
      Your answers are {props.data[0]}, {props.data[1]} and your score is{" "}
      {score}{" "}
    </div>
  );
}

answered Sep 10, 2020 at 13:22

Prateek Thapa

4,9481 gold badge12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

someRandomDev · Accepted Answer · 2020-09-10 13:31:03Z

1

You have an extra parentheses on your map, it should be like this:

    props.data.map((dat, i) => {
      if (dat === Answers[i]) {
        score++
      }
    })

You should use a forEach instead of a map since you're suppose to have a return value in a map which is not the case here. See documentation here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

edited Sep 10, 2020 at 13:31

someRandomDev

1,26611 silver badges20 bronze badges

answered Sep 10, 2020 at 13:18

William Rizzi

6134 silver badges11 bronze badges

1 Comment

Basanta Kc Over a year ago

it's better to use foreach than map since we aren't returning anything

Robert Vitoriano · Accepted Answer · 2020-09-10 13:25:29Z

0

You shoould not be using parenthesis and using the curly braces inside of it, it seems that you are used to conditional rendering notation:

    props.data.map((dat, i) => 
    (
{if (dat===Answers[i]) {score++}}
    )
);

write this instead:

props.data.map((dat, i) => 
   {
    if (dat===Answers[i]) {score++}
   }
 );

answered Sep 10, 2020 at 13:25

Robert Vitoriano

531 silver badge7 bronze badges

Comments

Basanta Kc · Accepted Answer · 2020-09-10 13:27:48Z

0

Use foreach instead of map since you're not returning anything. And you're wrapping all you if statement inside ( ) which makes means map method is trying to return the whole thing and will throw an error.

props.data.forEach((dat, i) => {
      if (dat === Answers[i]) {
        score++
      }
    })

answered Sep 10, 2020 at 13:27

Basanta Kc

2634 silver badges5 bronze badges

1 Comment

Ashok Kumar Over a year ago

Got it, will use forEach instead of map, Thank you!

Collectives™ on Stack Overflow

Error while using if statement inside Map reactJS

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related