title: Pass value from parent to child component with React
body: <p>I trying to display the rating of a query in my React App. But I'm not sure if I understand how to handle the state.</p>
  <p>This is my query component:</p>
  <pre><code>import React, { Component, useRef, useState, useEffect } from 'react';
  import { render } from 'react-dom';
  import InputSearchLandlord from './search'
  import './style.css'
  import SimpleRating from '../components/star_display'
  import ReactStars from 'react-rating-stars-component'
  import './style.css'
  
      
  const HandleSearch = () =&gt; {
      const [ratingValue, setRating] = useState(0)
      const [name, searcName] = useState(&quot;&quot;)
  
      const nameForm = useRef(null)
  
      const average = arr =&gt; arr.reduce( ( p, c ) =&gt; p + c, 0 ) / arr.length;
      const ratings = []
      const displayComment = async() =&gt; {
          try {
              const form = nameForm.current
              const name = form['name'].value
              searchName(name)
              const response = await fetch(`localhost`)
              const jsonData = await response.json()
              getComments(jsonData)
              comments.forEach(e =&gt; {
                  console.log(e.rating)
                  ratings.push(e.rating)
              })
              const rating = average(ratings) //Avg of all rating associated with the search 
              console.log(rating)             //Should be pass to Rating component
              setRating(rating)
          } catch (error) {
              console.log(error.message)
          }
      }
  
  
      return(
          &lt;div className=&quot;container&quot;&gt;
          &lt;div className=&quot;form-group&quot;&gt;
          &lt;h1 className=&quot;text-center mt-5&quot;&gt;SEARCH&lt;/h1&gt;
              &lt;form ref={nameForm} className=&quot;mt-5&quot;&gt;
                  &lt;InputSearch name={'name'}/&gt;
                  &lt;div className=&quot;d-flex justify-content-center&quot;&gt;
                      &lt;button type=&quot;submit&quot; className=&quot;d-flex btn btn-primary&quot; onClick={displayComment}&gt;Search&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
              &lt;div&gt;
              &lt;div className='container'&gt;
                  &lt;h1&gt;{name}&lt;/h1&gt;
                  &lt;SimpleRating data={ratingValue}
                  /&gt;
              &lt;/div&gt;
              &lt;div className='container'&gt;
                  {comments.map(comment =&gt; (
                      &lt;div className=&quot;commentSection&quot;&gt;
                           &lt;a&gt;
                              {comment.problem}
                          &lt;/a&gt;&lt;br/&gt;
                          &lt;a&gt;
                                  Posted on : {comment.date}
                          &lt;/a&gt;
                      &lt;/div&gt;
                  ))}
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default HandleSearch;
  </code></pre>
  <p>And this is my Rating component:</p>
  <pre><code>import React, { useState } from 'react';
  import { render } from 'react-dom';
  import ReactStars from 'react-rating-stars-component'
  import './style.css'
  import HandleSearch from '../pages/handleSearch'
  
  
  export default function SimpleRating(rating) {
  
    const [ratingValue, setRating] = useState(0)
  
    const options = {
      value: ratingValue, //Should use the value from the Search component
      a11y: true,
      isHalf: true,
      edit: false,
    };
  
    console.log(options.value)
  
    if (options.value == 0) return null //if rating value = 0 doesn't display the component
  
    return (
      &lt;div className=&quot;starComponent&quot;&gt;
        &lt;ReactStars {...options}/&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>So I trying to pass the value computed in the Search component to the Rating component. Before any query is made with the Search component, the value should be 0 and hidden.</p>
  <p>What am I missing ?</p>