Creating a function inside another function to change the state

Question

I'm new to React and wonder whether I have a simple syntax error or whether I'm going about this the wrong way (in a vanilla js way that it). I'm trying to just create a function (inside another function - inside the next() function, called updateCurrentStatus) that can update a simple array of objects (Reviews) so that the 'next' object's property 'current' changes to 'true' and the other objects' 'current' properties change to false.

It might make more sense seeing the reviews.json:

[
    {
      "name": "Peter Lahm",
      "comment": "Was ok. Quis nostrud exercitation ullamco laboris nisi.",
      "rating": 3.5,
      "date": "29 December 2019",
      "init": false,
      "current": false
    },
    {
      "name": "Simon Arnold",
      "comment": "Nice - quis nostrud exercitation ullamco laboris nisi.",
      "rating": 4,
      "date": "29 December 2019",
      "init": true,
      "current": true
    },
    {
      "name": "Claire Pullen",
      "comment": "Great - quis nostrud exercitation ullamco laboris nisi.",
      "rating": 4.5,
      "date": "29 December 2019",
      "init": false,
      "current": false
    }
]

The 'Simon Arnold' review is the 'current' review by default, so in order to display the next review I want the 'Claire Pullen' review to change the current property to true and the others false - so I wrote this function:

next() {
    console.log("next() execution start");

    for (let i = 0; i < Reviews.length; i++) { // 1. go through each review
      let review = Reviews[i];

      if (review["current"] && i < Reviews.length - 1) { // 2. if current one AND not last one
        updateCurrentStatus(Reviews[i + 1]); // 3. make the next review true & the rest false
      } else {
        updateCurrentStatus(Reviews[0]); // 4. else make the first review true & the rest false
      }

      function updateCurrentStatus(obj) {
        Reviews.forEach(function(rev) {
          if (obj == rev) {
            obj.current == true;
          } else {
            obj.current == false;
          }
        }
      }
    }

    console.log("next() execution end");
  }

However, I'm getting this error and I don't know why, apparently in line function updateCurrentStatus(obj) {:

Error in index.js (54:7)
',' expected.

Does anyone know how to fix this?

For more visibility, here's the rest of the index code:

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
import "./fontawesome.min.css";
import ReviewsLeftArea from "./ReviewsLeftArea";
import ReviewsRightArea from "./ReviewsRightArea";
import AllReviews from "./AllReviews";
import Reviews from "./reviews.json";

class App extends Component {
  constructor() {
    super();
    this.state = {
      reviews: Reviews,
      avgRating: (
        Reviews.reduce((total, cur) => total + cur.rating, 0) / Reviews.length
      ).toFixed(1),
      totalReviews: Reviews.length,
      initialReview: Reviews.find(({ init }) => init === true),
      currentReview: Reviews.find(({ current }) => current === true)
    };
  }

  componentWillMount() {
    Reviews.forEach(function(review) {
      if (review.init) {
        review["current"] = true;
      } else {
        review["current"] = false;
      }
    });
  }

  next() {
    console.log("next() execution start");

    for (let i = 0; i < Reviews.length; i++) { // 1. go through each review
      let review = Reviews[i];

      if (review["current"] && i < Reviews.length - 1) { // 2. if current one AND not last one
        updateCurrentStatus(Reviews[i + 1]); // 3. make the next review true & the rest false
      } else {
        updateCurrentStatus(Reviews[0]); // 4. else make the first review true & the rest false
      }

      function updateCurrentStatus(obj) {
        Reviews.forEach(function(rev) {
          if (obj == rev) {
            obj.current == true;
          } else {
            obj.current == false;
          }
        }
      }
    }

    console.log("next() execution end");
  }

  render() {
    return (
      <div id="reviews-area-wrap">
        <div id="reviews-area-inner">
          <ReviewsLeftArea
            totalReviews={this.state.totalReviews}
            avgRating={this.state.avgRating}
          />
          <ReviewsRightArea currentReview={this.state.currentReview} />
        </div>
        <AllReviews
          currentReview={this.state.currentReview}
          reviews={this.state.reviews}
        />
        {setTimeout(this.next, 3000)}
      </div>
    );
  }
}

render(<App />, document.getElementById("root-cont"));

And FYI, the 'current' properties are actually all null by default and changed by componentWillMount. I hope I've explained this clearly. Thanks for any help.

Answer 1

The closing parenthesis is missing in forEach method.

Reviews.forEach(function(rev) {
      if (obj == rev) {
        obj.current = true;
      } else {
        obj.current = false;
      }
})

And just for starters, this function declaration can be moved out of for loop as a function expression. Like so

const updateCurrentStatus = (obj) => {
        Reviews.forEach(function(rev) {
          if (obj == rev) {
            obj.current = true;
          } else {
            obj.current = false;
          }
        })
}
for (let i = 0; i < Reviews.length; i++) {
    ...
}