title: How to display data to input field after fetching data in reactjs
body: <p>I am fetching data from an API and would like to know how to set that fetched date in input fields. its seems like an absolute beginner problem, anyhow kindly help me of this.</p>
  <p>Here is my code:</p>
  <pre><code>export default function Consumerdetails() {
  
    const [consumer, getConsumer] = useState([]);
    useEffect(() =&gt; {
      httpClient(url + `/api/consumers`).then((res) =&gt; {
        console.log('Success:', res)
      })
      .catch(err =&gt; {
        console.log('An error occurred:', err.res)
      });
    });
  
  return (
  &lt;div&gt;
  &lt;TextField
     required
     id=&quot;outlined-required&quot;
     label=&quot;User Name&quot;
     variant=&quot;outlined&quot;
     name=&quot;username&quot;
     value={consumer.username} onChange={getConsumer}
  /&gt;
  
  &lt;TextField
     required
     id=&quot;outlined-required&quot;
     label=&quot;Phone Number&quot;
     variant=&quot;outlined&quot;
     name=&quot;phone&quot;
     value={consumer.phone} onChange={getConsumer}
  /&gt;
  &lt;/div&gt;
  })
  </code></pre>