title: Add star rating in React
body: <p>I have this React component that lists videos from a server's url:</p>
  
  <pre><code>import React, { Component } from "react";
  import axios from "axios";
  import Figure from "react-bootstrap/Figure";
  import Pagination from "@material-ui/lab/Pagination";
  import { NavigationBar } from "./NavigationBar";
  
  
  class VideoList extends Component {
    constructor(props) {
      super(props);
      this.state = {
        videos: [],
        totalVideoCount: 0,
      };
  
      this.handlePageChange = this.handlePageChange.bind(this);
    }
  
    //fetch all Videos
    getVideos(offset) {
      axios
        .get("/v1/videos" + offset) //offset for each page
        .then((response) =&gt; {
          this.setState({ totalVideoCount: response.data.total });
          var vid = [];
          //loop to give each video the value
          for (var i = 0; i &lt; response.data.items.length; i++) {
            vid[i] = {
              key: i,
              title: response.data.items[i].title,
              uri: response.data.items[i].uri[0].uri.replace(
                "localhost:80",
                "URL"
              ),
              thumbnail: response.data.items[i].previews.items[0].uri.replace(
                "localhost:80",
                "URL"
              ), 
            };
          }
          this.setState({ videos: vid });
        })
        .catch((error) =&gt; {
          console.log("Problem with Get request", error);
        });
    }
  
    //retrive all videos on startup
    componentDidMount() {
      this.getVideos("");
    }
  
    handlePageChange = (event, value) =&gt; {
      this.getVideos("?offset=" + (value - 1) * 20); //offset the video requests
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;NavigationBar /&gt;
          &lt;div
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          &gt;
            &lt;h1&gt;Videolist&lt;/h1&gt;
          &lt;/div&gt;
          &lt;ul style={{ listStyleType: "none" }}&gt;
            {this.state.videos.map((video) =&gt; (
              &lt;li
                style={{
                  margin: "50px",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                }}
                key={video["key"]}
              &gt;
                &lt;a href={video["uri"]}&gt;
                  &lt;Figure&gt;
                    &lt;Figure.Image
                      width={400}
                      height={200}
                      alt="Thumbnail missing"
                      src={video["thumbnail"]}
                    /&gt;
                    &lt;Figure.Caption&gt;{video["title"]}&lt;/Figure.Caption&gt;
                  &lt;/Figure&gt;
                &lt;/a&gt;
              &lt;/li&gt;
            ))}
          &lt;/ul&gt;
          &lt;div
            style={{
              margin: "50px",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          &gt;
            {/* Number of pages depends on number of Videos, 20 per page */}
            &lt;Pagination
              count={Math.ceil(this.state.totalVideoCount / 20)}
              onChange={this.handlePageChange}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default VideoList;
  </code></pre>
  
  <p>which is rendered in the <code>app.js</code> and works fine. I would like to add a component of a star rating system under each video, I found this <code>npm</code> component which is straight forward:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import StarRatingComponent from 'react-star-rating-component';
  
  
  class rating extends React.Component {
      constructor() {
          super();
  
          this.state = {
              rating: 1
          };
      }
  
      onStarClick(nextValue, prevValue, name) {
          this.setState({rating: nextValue});
      }
  
      render() {
          const { rating } = this.state;
  
          return (
              &lt;div&gt;
                  &lt;h2&gt;Rating from state: {rating}&lt;/h2&gt;
                  &lt;StarRatingComponent
                      name="rate1"
                      starCount={10}
                      value={rating}
                      onStarClick={this.onStarClick.bind(this)}
                  /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export rating.js; 
  </code></pre>
  
  <p>how can I render this component to appear under each video fetched by the <code>VideoList</code> component?</p>