title: Difference between React controlled component and uncontrolled component
body: <p>I am new to react and while learning I come across this example of controlled component.</p>
  
  <pre><code>function App() {
    let [fName, setFName]=useState('');
  
    return (
      &lt;div className="container"&gt;
        &lt;h1&gt;Hello {fName }&lt;/h1&gt;
        &lt;input name ='fname' value={fName} onChange={(e)=&gt; setFName(e.target.value)} type="text" placeholder="What's your first name?" /&gt;
  
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>just adding <code>value={fName}</code> makes is controlled . I don't actually understand what does it mean by controlled component and uncontrolled. Can you explain it from beginner prospective. </p>