Calculating the average number in an array of objects

So I’m creating a project using my skills in React.js. My project is a book review SPA that allows users to navigate different components that provide information and reviews on a certain book. in the parent class component I want to display a stats component that is above the header and contains important information like how many reviewers made a post and what is the average rating out of five stars for that book. I know I need to create a callback function and pass it down to the stats component; I also know how to get the average number in and array of objects using the map and reduce method. The problem is I don’t know how to get the average number and then put in the callback function. I will post my code down below.

problem code:

/*My helper functions. I have an accumulator function and a 
getRating function that gets all the ratings inside my array of objects*/

  reducer = (accumulator, currentValue) => {accumulator + currentValue};

  getRating = () => {
   return this.state.UserReviews.rating
 }

/*I use the map method to extract all the ratings from my array of objects*/
 const ratingScores = this.state.UserReviews.map(getRating);

/*I add up all the numbers in my array by using the reduce method*/
 const addScores = this.ratingScores.reduce(reducer, 0);

/*I then devide all the added up numbers by the length of the array.*/
const averageScore = this.addScores / this.ratingScores.length;

  reviewScore = () => {

      this.setState( prevState => {

        return {



          /*this is where I'm getting stuck*/



        }

      })



  }

full parent component:

import React, {Component} from 'react';
import Header from './Header.js';
import Stats from './Stats.js';
import { provider } from './Context.js';
/*function App()*/

class App extends Component {


  state = {

    UserReviews: [

        {
          name: 'John',
          review: `I was sitting next to a young woman reading on a plane who was reading this. She told me that she liked it much better than the series. That it was well-written and hard to put down. She specifically mentioned that it had very little of the gratuitous sex that seems to pervade the TV show. On her recommendation, I bought the book and completely agree with everything she said.
  Even though it is difficult not to imagine the faces the actors when reading the book, it is still an awesome read. Much more detailed than the series, but also enhanced by it to a certain extent.
  Brilliant writing.`,
          rating: 4,
          date: 'May 29, 2016',
          id: 1
        },
        {
          name: "Chris",
          review: `For years, people have rambled on and on about GAME OF THRONES, and all the while I was not interested. But after many cast interviews, and observations of the political goings-on. But before I could watch the first few episodes of the first season, I had to read the first book. And that's exactly what I did! And you know? It was most rewarding. Personally, for me, reading about Arya Stark turned out to be more fun than watching her on the show. Same goes for Jon Snow and Lord Eddard Stark. But the one that I was really hooked on, next to Snow, was Tyrion Lannister. An educated soul among a very masculine, not-so-educated family. I really can't understand how I did not hear of A Song of Ice and Fire when it was out in the 90s. I CANNOT!! Anyway, after reading far enough into the book, I started the series. And the rest is history. It is way beyond The Wizard of Oz. No disrespect intended.`,
          date: 'January 25, 2019',
          rating: 5,
          id: 2
        },
        {
          name:"Constantine",
          review:`I was really surprised at how much I actually enjoyed reading this after watching the series. I am the type of person that has a hard time reading a book after watching the movie/show/etc because I find myself trying to rush through it. Instead I was intrigued by the additional details and thoughts. I was also surprised at how true they kept to the novel. I found that to be really impressive. There were only minor changes here and there. I'm looking forward to reading the rest in the series.`,
          date:'September 25, 2017',
          rating: 3,
          id: 3
        },
        {
          name:"Laura",
          review:'An unnecessarily dark tale of family, death, and politics in a cruel mid evil fantasy setting. George is an incredibly talented writer, but it is wasted on such a bleak story. Nothing good will come from reading this series except that your diction may improve. An unfortunate waste of time',
          date:'October 17, 2017',
          rating: 1,
          id: 4
        },
        {
          name:"Brie",
          review:`George R.R. Martin is a genius and Game of Thrones is one of the best books I've ever read in my lifetime. This book has gotten under my skin and will live long in my memory. The sheer joy and pleasure of reading book one in the series has made me tremendously happy. I loved that the book was so long. It took me months to read it but I'm not complaining a bit. It was time well invested in the story and characters. I own all five books on my Kindle now. I love that I can easily take my beloved books with me wherever I go and dip into the world of A Song of Ice and Fire whenever I want. Bravo, Bravo, Bravo GRRM!!!! Now my journey takes me onto book two :)`,
          date:'October 5, 2019',
          rating: 5,
          id: 5
        }


    ]


  }

/*My helper functions. I have an accumulator function and a
getRating function that gets all the ratings inside my array of objects*/

  reducer = (accumulator, currentValue) => {accumulator + currentValue};

  getRating = () => {
   return this.state.UserReviews.rating
 }

/*I use the map method to extract all the ratings from my array of objects*/
 const ratingScores = this.state.UserReviews.map(getRating);

/*I add up all the numbers in my array by using the reduce method*/
 const addScores = this.ratingScores.reduce(reducer, 0);

/*I then devide all the added up numbers by the length of the array.*/
const averageScore = this.addScores / this.ratingScores.length;

  reviewScore = () => {

      this.setState( prevState => {

        return {



          /*this is where I'm getting stuck*/



        }

      })



  }


render () {

  return (
    <provider value={this.state.UserReviews}>
    <div>
      <h1 className='Title'>A Game Of Thrones (A Song Of Ice and Fire)</h1>
      <h2 className='Title faint'><em>By George R.R. Martin</em></h2>
      <Stats
      numOfReviewers={this.state.UserReviews.length}
      averageReviewScore={this.reviewScore}
      />
      <Header state={this.state.UserReviews}/>
    </div>
    </provider>
  );
}
}

export default App;

hi Paine8887,
congrats on your new project.

  1. I think you should use averageScore as the second property of your {state} object:
  1. you can put all the computing of average number inside the function reviewScore() ;

  2. Then

  1. finally to call the function you can use componentWillMount():
  1. in the render() use the updated average:

Thank you. So I created I created a new property in UserReviews object and successfully passed it down. The result I get from reviewScore function is NaN so I need to work on that. heres what i have so far in my reviewScore function

  reviewScore = () => {


                //My helper functions. I have an accumulator function and a
                //getRating function that gets all the ratings inside my array of objects

              const  reducer = (accumulator, currentValue) => { return accumulator + currentValue};

              const  getRating = () => {
                 return this.state.UserReviews.rating
               }

              //I use the map method to extract all the ratings from my array of objects
               const ratingScores = this.state.UserReviews.map(getRating);

              //I add up all the numbers in my array by using the reduce method
               const addScores = ratingScores.reduce(reducer, 0);

              //I then devide all the added up numbers by the length of the array.
              const averageScores = addScores / ratingScores.length;




      this.setState( prevState => {

        return {averageScore : averageScores}

      })



  }


  componentDidMount() {
    this.reviewScore();
}