title: Passing Data from Child to Parents React Hooks
body: <p>I am new to react Hooks (I should say: haven't even started with them yet), but I need assistance with this small problem. This component renders stars and allows a user to select the rating. I want to pass the {starSelected} value from this component to a parent component. </p>
  
  <pre><code>import React, { useState } from "react";
  import "./styles.css";
  
  const Star = ({ selected = false, onClick = f =&gt; f }) =&gt; (
    &lt;div className={selected ? "star selected" : "star"} onClick={onClick} /&gt;
  );
  
  const StarRating = ({ totalStars }) =&gt; {
    const [starsSelected, selectStar] = useState(0);
    return (
      &lt;div className="star-rating"&gt;
        {[...Array(totalStars)].map((n, i) =&gt; (
          &lt;Star
            key={i}
            selected={i &lt; starsSelected}
            onClick={() =&gt; selectStar(i + 1)}
          /&gt;
        ))}
        &lt;p&gt;
          {starsSelected} of {totalStars} stars
        &lt;/p&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>I would appreciate any help!!!</p>
  
  <p>Parent Component </p>
  
  <pre><code>
  class RatingNFeedback extends Component {
      constructor(props) {
          super(props);
          this.state = {
              user: {},
              modal: false,
              ratings: '',
              feedback: '',
              feedbackTitle: '',
              errors: {}
          };
          this.toggle = this.toggle.bind(this);
      }
  
      toggle() {
          this.setState(prevState =&gt; ({
              modal: !prevState.modal,
              ratings: '',
              feedback: '',
              feedbackTitle: ''
          }));
      }
  
      handleRating = (assetId, accessToken) =&gt; {
          const {rating, feedback, feedbackTitle} = this.state;
          const ratings = {
              rating,
              feedbackTitle,
              feedback,
              asset: assetId
          };
          this.props.addRatingNComment(ratings, accessToken);
          this.toggle();
      };
  
      onChange = e =&gt; {
          this.setState({
              [e.target.name]: e.target.value
          });
      };
  
      isModalOpen() {
          return this.state.modal;
      }
  
      render() {
          const {ratingCount, commentCount, assetId, accessToken} = this.props;
          let stars = [];
          //loop 5 times for stars
          for (let i = 1; i &lt;= 5; i++) {
              let path = require('../../assets/rateFull.svg');
              if (i &gt; ratingCount) {
                  path = require('../../assets/RateZero.svg');
              }
              stars.push(&lt;img src={path} alt="" className="card-category-rating" /&gt;);
          }
          let userpic = defaultPic;
          if (this.props.user) {
              userpic =
                  'http://people.com/User%20Photos/Profile%20Pictures/' +
                  this.props.user.profile +
                  '_LThumb.jpg';
          }
  
          return (
              &lt;React.Fragment&gt;
  
                  &lt;Modal
                      isOpen={this.isModalOpen()}
                      toggle={this.toggle}
                      //style={{height: '500px', width: '500px'}}
                      centered
                      className="modal"
                      animation="true"
                  &gt;
                      &lt;ModalHeader toggle={this.toggle} className="modal-header"&gt;
                          &lt;span className="modal-title"&gt; How would you rate this report? &lt;/span&gt;
                      &lt;/ModalHeader&gt;
                      &lt;ModalBody className="modal-body "&gt;
                          &lt;div className="rating-modal-header"&gt;
                              {' '}
                              &lt;div className=" image-name-box"&gt;
                                  &lt;div className="circular-landscape image-box"&gt;
                                      &lt;img src={userpic} alt="Employee Image" className="user-profile" /&gt;{' '}
                                  &lt;/div&gt;
                                  &lt;div className="name-box"&gt;
                                      {' '}
                                      &lt;p className="normal-text-2"&gt;
                                          {' '}
                                          {`${this.props.userName} ${this.props.familyName}`}{' '}
                                      &lt;/p&gt;{' '}
                                      &lt;p className="small-text-2 "&gt; Your review will be posted on Our Website.&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;{' '}
                          &lt;/div&gt;
                          &lt;div className="heading3"&gt;Your Ratings&lt;/div&gt;
  
                          &lt;StarRating totalStars={5} /&gt;
  
                          &lt;FormTextInput
                              label="Your Feedback:"
                              name="feedbackTitle"
                              value={this.state.feedbackTitle}
                              onChange={this.onChange}
                              placeholder="Title goes here..."
                              type="text"
                          /&gt;
                          &lt;FormTextInput
                              //label="Your Feedback:"
                              name="feedback"
                              value={this.state.feedback}
                              onChange={this.onChange}
                              placeholder="Write your feedback here..."
                              type="textarea"
                          /&gt;
                      &lt;/ModalBody&gt;
                      &lt;ModalFooter&gt;
                          &lt;Button
                              color="primary"
                              onClick={() =&gt; this.handleRating(this.props.assetId, this.props.accessToken)}
                          &gt;
                              Submit
                          &lt;/Button&gt;{' '}
                          &lt;Button color="secondary" onClick={this.toggle}&gt;
                              Cancel
                          &lt;/Button&gt;
                      &lt;/ModalFooter&gt;
                  &lt;/Modal&gt;
              &lt;/React.Fragment&gt;
          );
      }
  }
  </code></pre>