title: Within a parent component, is there any way I can access a prop from a child component?
body: <p>There's a problem I frequently run into when building React projects - I'll need a prop in component, but can't access it because it violates the unidirectional flow of props.</p>
  <p>Here's the specific problem I have now:
  In my <code>CafeReviews.jsx</code> component, I need to access a piece of data <code>averageRating</code> - however, this property is contained with the child component <code>Review.jsx</code>. <br>
  So I need to access this data within <code>CafeReviews</code>, so that I can pass it as a prop to <code>&lt;CafeHeader/&gt;</code>.</p>
  <p>Any ideas on how I can solve this, without having to restructure my components?</p>
  <p>This is the parent component <code>CafeReviews.jsx</code></p>
  <pre><code>import React,{useState, useEffect} from 'react'
  import axios from 'axios'
  import Review from './Review'
  import CafeHeader from './CafeHeader'
  
  const CafeReviews = ({ match }) =&gt; {
    const [cafe, setCafe] = useState([]);
    const [reviews, setReviews] = useState([]);
  
    useEffect(() =&gt; {
      axios.get(`/api/cafe/${match.params.id}`).then((result) =&gt; {
        setCafe(result.data);
      })
      axios.get(&quot;http://localhost:5000/api/all-reviews&quot;)
        .then((review) =&gt; {
          setReviews(review.data);
        })
        .catch((err) =&gt; {
          console.log(err);
        })
    }, [])
  
    let filteredReviews = reviews.filter((review) =&gt; {
      return review.cafeName === cafe.cafeName;
    });
  
  
    return (
      &lt;div&gt;
        &lt;CafeHeader cafe={cafe} /&gt;
        &lt;div className=&quot;reviews-container&quot;&gt;
        &lt;Review reviews={filteredReviews} /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  export default CafeReviews
  </code></pre>
  <p>...and one of the child components, <code>Review.jsx</code>, containing the <code>averageRating</code> property I want to access:</p>
  <pre><code>import React from 'react'
  import axios from 'axios'
  import {convertToStars, averageStarRating} from '../helperFunctions'
  
  const Review = (props) =&gt; {
    const { reviews } = props;
  
    const handleClick = (id) =&gt; {
      axios
        .delete(`/api/reviews/${id}`)
        .then(() =&gt; {
          console.log(&quot;review successfully deleted&quot;);
        })
        .catch((err) =&gt; {
          console.log(err);
        })
    }
  
    return (
      &lt;div&gt;
        {
        reviews.map((review) =&gt; {
          const { title, userName, blurb, stars, _id } = review;
  
          const starRating = convertToStars(stars)
          const averageRating = averageStarRating(reviews)
  
          return (
            &lt;div  className = 'review-container'&gt;
              &lt;h1&gt;{title}&lt;/h1&gt;
              {starRating.map((item) =&gt; {
                return item
              })}
              &lt;h2&gt;{`Review by: ${userName}`}&lt;/h2&gt;
              &lt;p&gt;{blurb}&lt;/p&gt;
              &lt;button onClick={() =&gt; handleClick(_id)}&gt;Delete&lt;/button&gt;
            &lt;/div&gt;
          )
        })
        }
      &lt;/div&gt;
    )
  }
  
  export default Review
  </code></pre>