title: Updating component's state using props with functional components
body: <p>I am trying to update the state of my component using props that I get from the parent component, but I get the following error message: </p>
  
  <blockquote>
    <p>Too many re-renders. React limits the number of renders to prevent an infinite loop.</p>
  </blockquote>
  
  <p>I want the local state to update if the prop changes.
  The similar posts (<a href="https://stackoverflow.com/questions/52967007/updating-components-state-using-props">Updating component&#39;s state using props</a>, <a href="https://stackoverflow.com/questions/39154967/updating-state-with-props-on-react-child-component">Updating state with props on React child component</a>, <a href="https://stackoverflow.com/questions/52967007/updating-components-state-using-props">Updating component&#39;s state using props</a>) did not fixed it for me. </p>
  
  <pre><code>import React, {useState} from "react"
  
  
  const HomeWorld = (props) =&gt; {
      const [planetData, setPlanetData] = useState([]);
      if(props.Selected === true){
          setPlanetData(props.Planet)
          console.log(planetData)
      }
  
  
      return(
          &lt;h1&gt;hi i am your starship, type: {planetData}&lt;/h1&gt;
      )
  }
  
  export default HomeWorld
  </code></pre>