CODEWITHSUNDEEP
javascriptreactjstypescript
Peter Penzov
Peter Penzov

Reputation: 1668

Get values from url using useParams

I have a React form with Material-UI. I would like to get the id from the URL link using useParams and make some API requests in order to populate form-data:

http://localhost:3001/profile?ids=9459377

Main app.tsx:

function App() {
  return (
      <Router>
        <Navbar />
        <Switch>
          <Route path='/ticket-profile/:ids' component={TicketProfile} />
        </Switch>
      </Router>
  );
}

I use this code to open a new page and pass ids param:

history.push(`/ticket-profile/ids=${id}`)

I need to get the data into this page:

export default function TicketProfile(props: any) {
    let { ids } = useParams();
    
    const [ticket, setTicket] = useState<TicketDTO[]>([]);

    useEffect(() => {
        getSingleTicket();    
    }, []);

    const getSingleTicket = async () => {
        getTicket(ids)
            .then((resp) => {
                setTicket(resp.data);
            })
            .catch((error) => {
                console.error(error);
            });
    }

But for this line let { ids } I get:

TS2339: Property 'ids' does not exist on type '{}'.

Do you know how I can fix this issue?

Upvotes: 3

Views: 1782

Answers (3)

duc mai
duc mai

Reputation: 1422

I guess you are using useParams from react-router. If so then try so here

 let { ids } = useParams<{ ids: Array<any>}>();

Upvotes: 1

Yaya
Yaya

Reputation: 4838

So this is the url

http://localhost:3001/profile?ids=9459377

In your code

const MyComponent = () => {

 const params = new URLSearchParams(window.location.search);

That's it! Now we should move on to getting the value and checking the existence of the query strings

Check if it has the query;

params.has('ids')

or get the value that is inside the query string

params.get('ids')

You can also show them conditionally

console.log(params.has('ids')?params.get('ids'):"")

Update:

Check out the working example

https://codesandbox.io/s/peaceful-https-vz9y3?file=/src/App.js\ This is how we should use it in your case

export default function TicketProfile(props: any) {
    const params = new URLSearchParams(window.location.search);
    const ids = params.get('ids');
    const [ticket, setTicket] = useState<TicketDTO[]>([]);

    useEffect(() => {
        getSingleTicket();    
    }, []);

    const getSingleTicket = async () => {
        getTicket(ids)
            .then((resp) => {
                setTicket(resp.data);
            })
            .catch((error) => {
                console.error(error);
            });
    }

Upvotes: 2

Tobias S.
Tobias S.

Reputation: 23825

You are pushing a wrong path to the history. Try it like this:

history.push(`/ticket-profile/${id}`)

Upvotes: -1

Related Questions