Problem with fetching API with user input

Question

I'm building a search form where you can search for a city/country. I'm getting a response, but it adds localhost to the url

http://localhost:3000/api.geonames.org/searchJSON?q=london&username=username

Which it shouldn't do... What I'm I doing wrong?

state = {
            text: ""
          }



 handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }



componentDidMount() {
    const endpoint = `${api}q=${this.state.text}&username=${userName}`
    console.log(endpoint)
    fetch(endpoint)
    .then(res => {
      console.log(res)
    })
  }



handleSubmit = (e) => {
    e.preventDefault()
    this.setState({text: ""})

    this.componentDidMount()

  }



 render() {
    return (
      <div>
        <h1>CityPop</h1>
        <form onSubmit={this.handleSubmit}>
          <h3>Search by city</h3>
          <input
            type="search"
            name="text"
            value={this.state.text}
            onChange={this.handleChange}
          />
          <button>Search city</button>
        </form>
      </div>
    )
  }

I'm getting it from another file where I declared the api url to a variable — Johanna Weidenius
– Johanna Weidenius, Commented Nov 20, 2019 at 13:27

kind user · Accepted Answer · 2019-11-20 13:20:41Z

2

Just add http/https protocol before the link:

const endpoint = `https://${api}q=${this.state.text}&username=${userName}`;

answered Nov 20, 2019 at 13:20

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problem with fetching API with user input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related