get the state of a function component for my url in getStaticProps

vegan_vicky

i want to fetch data from an input so i create a controlled component like this import React, { useState } from "react"; import axios from 'axios' type Props = {data:any}; function Locality({data}: Props) { const [city, setCity] = useState("13000"); return( <input list="city" type="text" placeholder={`Code postale, France`} onChange={(e) => { setCity(e.target.value) ; }} /> ) } i want to fetch an url according to the city set in the state but i...

Originally asked by Matt Freelance Web on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

nextjs getStaticProps is for getting build-time data on the server. React.useState is for managing run-time state, on the client If fetching your data relies on some user interaction, try doing this on the client with useEffect and useState function Locality({ data }) { const [city, setCity] = useState("13007"); const [features, setFeatures] = useState({}); const fetchData = async () => { const url = `https://geo.api.gouv.fr/communes?codePostal=${city}&format=geojson`; const result = await axios.get(url); const data = result.data.features; setFeatures(data); }; useEffect(() => { fetchData(); }, [city]); return ( <> <input value={city} type="text" placeholder={`Code postale, France`}...

Full answer by ksav: https://stackoverflow.stackexchange.com/a/74823407 (CC BY-SA 4.0).

Need it done for your business? UphillTech.