title: how can I update my api's fetch url params with a form input field?
body: <p>I'm trying to update my API's fetch URL params with data submitted by a form input field, but I can't figure out how to do so.</p>
  <p>More specifically, I'm using ipify geolocation API and need to update the fetch URL with an IP address submitted by the user. I'm currently just storing the user input as a state variable &quot;userIp&quot;, which I'd like to pass into the API fetch URL.</p>
  <p>I'm new to react and nextjs and can't seem to figure out what to search for to help me understand this, all the tutorials I can find don't cover this. Any help would be greatly appreciated</p>
  <p>api/ip.js</p>
  <pre><code>export default async function handler(req, res) {
    const ip = &quot;&quot; // placeholder, this should be value of userIp on index.js
    const url = `${process.env.IPIFY_URL}apiKey=${process.env.IPIFY_API}&amp;ipAddress=${ip}`
    
    const data = await fetch(url)
    .then(res =&gt; res.json())
  
    res.json(data); 
  }
  </code></pre>
  <p>index.js</p>
  <pre><code>import { useState } from &quot;react&quot;
  
  const home = () =&gt; {
  
    const [info, setInfo] = useState([])
    const [userIp, setUserIp] = useState('') // user input ip address
  
    const handleSubmit = (e) =&gt; {
      e.preventDefault()
      fetchIp()
    };
  
    const fetchIp = async () =&gt; {
      const response = await fetch('/api/ip')
      const data = await response.json()
      setInfo(data)
    }
  
    return (
      &lt;&gt;
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;input
            type=&quot;text&quot;
            name=&quot;IP&quot;
            value={userIp}
            onChange={(e) =&gt; setUserIp(e.target.value)}
          /&gt;
          &lt;button type=&quot;submit&quot;&gt;
            Submit
          &lt;/button&gt;
        &lt;/form&gt;
  
        &lt;p&gt;{info.ip}&lt;/p&gt;
        &lt;p&gt;{info.location?.city}&lt;/p&gt;
      &lt;/&gt;
    );
  }
  
  export default home;
  </code></pre>