Question

0

115

Views

Cannot input into text box or click button in react

I cannot click on my input text box or button at all anymore for some reason. It broke as I was styling the elements. When i first load the page, the autofocus attribute still works but as soon as I try to click the button or re-enter the text box it doesn't work.


import React, { useState } from 'react';
import axios from 'axios'; 

function Header() {

    const [text, setText] = useState("");

    function handleChange(event) {
        setText(event.target.value);
    }

    function handleClick() {
        const geoCoderURL = "http://api.openweathermap.org/geo/1.0/direct?q=" + text + "&limit=5&appid=feab629ddad64dc21d6412ebae467d79"
        function getCoordinates(url) {
            axios.get(url).then((response) => {
                const locationLat = response.data[0].lat;
                const locationLon = response.data[0].lon;
                console.log(locationLat, locationLon);
            });
        } 
        getCoordinates(geoCoderURL);        
    }

    return (
        <div className="header">
            <h1 className="headerTitle">Five Day Forecast</h1> 
            <input onChange={handleChange} type="text" name="name" autoFocus placeholder="Enter city name here."/>
            <button type="submit" onClick={handleClick}>Forecast</button> 
        </div>
    )
}

export default Header;

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T11:36:40.465Z

Check this. Here is the Sandbox Link

import React, { useState } from "react";
import axios from "axios";

function Header() {
  const [text, setText] = useState("");
  const [locationLat, setlocationLat] = useState("");
  const [locationLon, setlocationLon] = useState("");

  function handleClick() {
    console.log(text);
    axios.get(
        `https://api.openweathermap.org/geo/1.0/direct?q=${text}&limit=5&appid=feab629ddad64dc21d6412ebae467d79`
      )
      .then(function (response) {
        setlocationLat(response.data[0].lat);
        setlocationLon(response.data[0].lon);
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  function handleInput(e) {
    setText(e.target.value);
  }

  return (
    <div className="header">
      <h1 className="headerTitle">Five Day Forecast</h1>
      <input
        onChange={handleInput}
        type="text"
        name="name"
        autoFocus
        placeholder="Enter city name here."
      />
      <button onClick={handleClick}>Forecast</button>
      <p>{locationLat}</p>
      <p>{locationLon}</p>
    </div>
  );
}

export default Header;

Revoke the API Key or APP ID, Don't post it publically

0

115

Cannot input into text box or click button in react

1 answers

0

Find remote jobs

Andres GPT