score:0

you can store the value of input field inside state and use it directly inside async call.

plus you need a onchange handler as every time you update input text, state should know the updted value.

import react from 'react';
import './app.css';

class app extends react.component {
  constructor(props) {
    super(props);
    // here.........................
    this.state = { apiresponse: '', text : null };
  }
  
  // here ...........................
  handlechnage = (e) => this.setstate({text : e.target.value})

  async callapi() {

    // checking the input value and pass to api..................
    console.log(this.state.text)

    const ipaddress = '8.8.8.8';
    const api_url = `http://localhost:9000/ipdata/${ipaddress}`;
    const res = await fetch(api_url, {
      headers: {
        'content-type': 'application/json',
        accept: 'application/json',
      },
    });
    const json = await res.json();
    console.log(json);
    // don't use it..............use state to pass the data
    document.getelementbyid('city').textcontent = json.city;
     document.getelementbyid('state').textcontent = json.region_code;
    document.getelementbyid('zip').textcontent = json.zip;
  }

  render() {
    // here on input element .................
    return (
      <div classname="app">
        <h1>ip search</h1>
        <input type="text" value={this.state.text} onchange={this.handlechange}></input>
        <button onclick={this.callapi}>search ip</button>
        <p>
          <span id="city" /> <span id="state" /> <span id="zip" />
        </p>
      </div>
    );
  }
}

export default app;

note - don't use imperative methods like getelementbyid and others in react.

score:0

please avoid using dom methods in reactjs, here is an example of what you might want to do with your application. `

import react,{usestate} from 'react';


function app(){
  const [apires,setapires]= usestate('');
  const [loading,setloadng]= usestate(false);
  const callapi= async()=>{
    // supose this is your api response in json
    const hello={
      city:"city1",
      region_code:"region#123",
      zip:"00000"
    }
    // loading while city and zip are not available
    setloadng(true)
    await settimeout(()=>{setapires(hello)},5000)
    
  }

  return (
    <div classname="app">
      <h1>ip search</h1>
      <input type="text"></input>
      <button onclick={callapi}>search ip</button>
     {!apires && loading && <p>loading count till 5...</p>}
      <p>
       {apires &&
         (
           <>
         <span> {apires.city}</span>
         <span> {apires.region_code}</span>
         <span> {apires.zip}</span>
         </>
         )}
             </p>
    </div>
  );
}
 

export default app;

` link to sandbox: [sandbox]: https://codesandbox.io/s/priceless-mclaren-y7d7f?file=/src/app.js/ "click here to run above code"

score:1

there are two issues:

  • to get the input value, use a controlled component: put the input value into state and add a change handler.

  • to set the city, state, zip sections, don't use vanilla dom methods (which should be avoided in react in 95% of situations) - instead, put the response into state.

class app extends react.component {
    constructor(props) {
        super(props);
        this.state = { apiresponse: '', inputvalue: '', result: {} };
    }

    async callapi() {
        try {
            const api_url = `http://localhost:9000/ipdata/${this.state.inputvalue}`;
            const res = await fetch(api_url, {
                headers: {
                    'content-type': 'application/json',
                    accept: 'application/json',
                },
            });
            const result = await res.json();
            this.setstate({ result });
        } catch (error) {
            // handle errors - don't forget this part
        }
    }

    render() {
        return (
            <div classname="app">
                <h1>ip search</h1>
                <input
                    type="text"
                    value={this.state.inputvalue}
                    onchange={e => this.setstate({ inputvalue: e.target.value })}
                />
                <button onclick={this.callapi}>search ip</button>
                <p>
                    <span>{this.state.result.city}</span>
                    <span>{this.state.result.state}</span>
                    <span>{this.state.result.zip}</span>
                </p>
            </div>
        );
    }
}

Related Query

More Query from same tag