title: React passing data or adding to state wrong
body: <p>When I leave this code as is, I will get the correct console.log (commented with &quot;these appear correct&quot;) that I'm looking for. However when I replace the api_url with <code>http://localhost:9000/ipdata/${this.state.inputValue}</code> the console.log is blank. This is why I think I'm either passing the input value wrong or I'm adding it to the state wrong.</p>
  <p>I would assume I'm adding it to the state wrong as the spans that I'm trying to render in order to output the data on the client aren't displaying anything either.</p>
  <p>Heres my code ...</p>
  <pre><code>import React from 'react';
  import './App.css';
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = { apiResponse: '', inputValue: '', result: {} };
    }
  
    async callAPI() {
      try {
        console.log('called API...');
        const api_url = `http://localhost:9000/ipdata/8.8.8.8`;
        const res = await fetch(api_url, {
          headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
          },
        });
        const result = await res.json();
        // these appear correct
        console.log(result.city);
        console.log(result.region_code);
        console.log(result.zip);
        this.setState({ result });
      } catch (error) {
        // handle errors
      }
    }
  
    render() {
      return (
        &lt;div className=&quot;App&quot;&gt;
          &lt;h1&gt;IP Search&lt;/h1&gt;
          &lt;input
            type=&quot;text&quot;
            value={this.state.inputValue}
            onChange={(e) =&gt; this.setState({ inputValue: e.target.value })}
          /&gt;
          &lt;button onClick={this.callAPI}&gt;Search IP&lt;/button&gt;
          &lt;p&gt;
            &lt;span&gt;{this.state.result.city}&lt;/span&gt;
            &lt;span&gt;{this.state.result.region_code}&lt;/span&gt;
            &lt;span&gt;{this.state.result.zip}&lt;/span&gt;
          &lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  <p>API call on the Node server...</p>
  <pre><code>const fetch = require('node-fetch');
  app.get('/ipdata/:ipaddress', async (req, res, next) =&gt; {
    console.log(req.params);
    const ipaddress = req.params.ipaddress;
    console.log(ipaddress);
    const api_url = `http://api.ipstack.com/${ipaddress}?access_key=API_KEY`;
    const response = await fetch(api_url);
    const json = await response.json();
    res.json(json);
  });
  </code></pre>