javascript - Getting the error 'Invalid hook call' when add add render form

Question

I'm trying to use state on two radio buttons that render different forms when you select each button, but when I try to add a map to consult address this invalid hook call appears and I don't know how to resolve this. Here's the code

    const Pointer = () => (
      <img id="pointer" alt="ícone localiza??o" src={pinterIcon} alt="Pointer" />
    )

    const [mask, setMask] = useState('999.999.999-999')
    const [maskPhone, setMaskPhone] = useState('(99) 9999-99999')

    const [phone, updatePhone] = useState('')
    const [address, updateAddress] = useState('')
    const [coordinates, updateCoordinates] = useState([0, 0])

    const GOOGLE_MAPS_API_URL =
    'https://maps.googleapis.com/maps/api/geocode/json'

    function getAddressByCoordinates(latitude, longitude) {
    axios
      .get(
        `${GOOGLE_MAPS_API_URL}?address=${latitude}+${longitude}&key=${process.env.GATSBY_GOOGLE_MAPS_API_KEY}`
      )
      .then(response => {
        const { results } = response.data  
        if (results.length === 0) return

        updateAddress(results[0].formatted_address)
      })
    }

    useEffect(() => {
      navigator.geolocation.getCurrentPosition(position => {
        const { latitude, longitude } = position.coords

        updateCoordinates([latitude, longitude])

        getAddressByCoordinates(latitude, longitude)
      })
    }, [])

    async function handleSubmit(event) {
      event.preventDefault()

      const response = await api.post('clients', {
        
        address,
        latitude: coordinates[0],
        longitude: coordinates[1],
      })
    }

    async function handleMapClick(event) {
      updateCoordinates([event.lat, event.lng])

      getAddressByCoordinates(event.lat, event.lng)
    }

    function handleGetCoordinates() {
      if (address.length > 0) {
        axios
          .get(
            `${GOOGLE_MAPS_API_URL}?address=${address}&key=${process.env.GATSBY_GOOGLE_MAPS_API_KEY}`
          )
          .then(response => {
            const { results } = response.data

            if (results.length === 0) return

            updateAddress(results[0].formatted_address)
            updateCoordinates([
              results[0].geometry.location.lat,
              results[0].geometry.location.lng,
            ])
          })
      }
    }

    const handleValidadePhone = event => {
      const { value } = event.target
      if (value.length > 14) {
        setMaskPhone('(99) 99999-9999')
      } else {
        setMaskPhone('(99) 9999-99999')
      }
      updatePhone(value)
    }

    const handleChangePhone = event => {
      updatePhone(event.target.value)

      handleValidadePhone(event)
    }

    class App extends Component {
      
      constructor(props) {
        super(props);
        this.state = {
          internet: ""
        };
      }

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

      renderForm = () => {
        switch (this.state.internet) {
          case "residencial":
            return (
                    <form className="form" autoComplete="off">
                        <div className="input-block">
                          <label htmlFor="name">Nome</label>
                          <input
                            type="text"
                            name="name"
                            id="name"
                            onChange={props.handleChange}
                            required
                          />
                        </div>
                        <div className="input-block">
                            <label htmlFor="email">Email</label>
                            <input
                              type="email"
                              name="email"
                              id="email"
                              onChange={props.handleChange}
                              equired
                            />
                        </div>

                        <div className="input-block">
                            <label htmlFor="phone">Telefone</label>
                            <input
                              mask={maskPhone}
                              maskChar=""
                              type="phone"
                              name="phone"
                              id="phone"
                              onChange={handleChangePhone}
                              required
                            />
                        </div>
                        <div className="input-block" id="input">
                            <label 
                            htmlFor="address"
                            >
                              Endere?o
                            </label>
                            <input
                              type="text"
                              id="address"
                              value={address}
                              onChange={event => updateAddress(event.target.value)}
                              onBlur={handleGetCoordinates}
                              placeholder="Rua, Número, Bairro, Cidade, UF"
                              required
                            />
                        </div>

                        <div className="btn-address">
                            <button 
                              type="submit"
                              className="address-btn"
                              >Consultar Endere?o
                            </button>
                        </div>

                        <div style={{ height: '430px', width: '100%', marginTop: '20px' }}>
                            <GoogleMap
                              bootstrapURLKeys={{
                                key: 'AIzaSyDRDXI4V6LTjYIZ6rdi5j9soHPCVv_NIl0',
                              }}
                              zoom={15}
                              center={coordinates}
                              onClick={handleMapClick}
                            >
                              <Pointer lat={coordinates[0]} lng={coordinates[1]} />
                            </GoogleMap>
                        </div>
                      </div>
                    </form>
            );
          case "empresarial":
            return (

                    <form className="form">
                      <div>
                        This one works
                      </div>
                    </form>
            );
          default:
            return null;
        }
      };

      render() {
        return (
          <Container>
            <section className="sectio">
              <div className="check-blok" onChange={this.onChangeValue}>
                <div className="check">
                  <input
                    type="radio"
                    id="residencia"
                    name="internet"
                    value="residencial"
                    onChange={this.handleChange}
                  />
                  <label for="residencial">Internet Residencial</label>
                  <input
                    type="radio"
                    id="empresa"
                    name="internet"
                    value="empresarial"
                    onChange={this.handleChange}
                  />
                  <label for="empresarial">Internet Empresarial</label>
                </div>
              </div>
              <div className="emp-sec">
                {this.renderForm()}
              </div>
              <div className="continue">
                <button
                  className="btn-continue"
                  onClick={this.handleContinue}
                  // onClick={props.next}
                >
                  Continuar
                </button>
              </div>
            </section>
          </Container>
        )
      }
    }
    export default App ;

question from:https://stackoverflow.com/questions/66051847/getting-the-error-invalid-hook-call-when-add-add-render-form

Answer 1

I guess the main issue is you are using useEffect hook inside getAddressByCoordinates function. Hook calls should be happening in root level of the component. You need to move out from that function to the root level.

Technically you are violating the Rules of Hooks, Only Call Hooks at the Top Level:

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.