How to fetch data URL

Question

Using React In my below code I have two button when I click on button1 then open another URL which is fetched in API https://mocki.io/v1/be3cb19b-bd49-4a82-b19b-44b859e19d5d based on id1 and when I click on button then then open different URL which is fetched in API which id 2 based on id fetched.

How can we do that using React?

https://codesandbox.io/s/challenge-7-fetch-a-list-final-forked-5me46?file=/src/index.js check here in my code I am not able to do that when I click on button1 then URL not fetched in API and not open. I'm stuck on that.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import ScotchInfoBar from "./ScotchInfoBar";
import "./styles.css";

function App() {
  const fetchData = async () => {
    const response = await axios.get(
      "https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54"
    );

    response.data;
  };

  return (
    <div className="App">
      {/* Fetch data from API */}
      <div>
        <button className="fetch-button" onClick={fetchData}>
          Data1
        </button>
        <button className="fetch-button" onClick={fetchData}>
          Data2
        </button>

        <br />
      </div>

      {/* Display data from API */}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Yes yes we're coming, hold your horses, you asked your question one minute ago. `const myData = (await axios.get(...)).data`, that's it. You don't even need Axios at all : `const myData = await (await fetch( url ) ).text()` (or `.json()`) — Jeremy Thille, Apr 26 '21 at 15:05
https://codepen.io/kupraveen/pen/poRYJOM can u edit and showed me i m not able to do — sneha, Apr 26 '21 at 15:13

score 0 · Answer 1 · answered Apr 26 '21 at 15:07

you could pass the id in as an argument into your fetchData function like the following:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import ScotchInfoBar from "./ScotchInfoBar";
import "./styles.css";
function App() {
  const fetchData = async (id) => {
    const response = await axios.get(`https://mocki.io/v1/${id}`);
    console.log(response.data);
  };

  return (
    <div className="App">
      {/* Fetch data from API */}
      <div>
        <button
          className="fetch-button"
          onClick={() => fetchData("4d51be0b-4add-4108-8c30-df4d60e8df54")}
        >
          Data1
        </button>
        <button
          className="fetch-button"
          onClick={() => fetchData("4d51be0b-4add-4108-8c30-df4d60e8df54")}
        >
          Data2
        </button>

        <br />
      </div>

      {/* Display data from API */}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

can u edit and showed me something https://codepen.io/kupraveen/pen/poRYJOM here bcz when i try ur code its not worked — sneha, Apr 26 '21 at 15:12

Ashish · Answer 2 · 2021-04-26T15:26:29.333

0

As per the codesandbox link, When you click the URL, you are not getting the response, it is due to the CORS error. Refer this for CORS issue. You can check this by wrapping your API call in try-catch.

const fetchData = async () => {
    try {
        const response = await axios.get("https://mocki.io/v1/4d51be0b-4add-4108-8c30-df4d60e8df54");
        console.log(response.data);
    }catch (error) {
        console.log(error)
    }
};

Coming to the second question: How you can trigger different APIs on different button clicks?

You can pass different inline functions for onClick of your buttons, like:

<button
  onClick={onClick={() => fetchData("some-id-1")}}
>
    Button 1
</button>
<button
  onClick={onClick={() => fetchData("some-id-2")}}
>
    Button 2
</button>

and handle these ids in fetchData function like:

const fetchData = async (id) => {
    try {
        const response = await axios.get(`https://mocki.io/v1/${id}`);
        console.log(response.data);
    }catch (error) {
        console.log(error)
    }
};

edited Apr 26 '21 at 15:26

answered Apr 26 '21 at 15:14

Ashish

4,206
16
45

I know, you are stuck with some hiring challenge and it is urgent for you to get the answers immediately, but first refer the link shared, before asking further questions – Ashish Apr 26 '21 at 15:21
i have resolve the issue cors error after that i run the code its showing error https://codesandbox.io/s/challenge-7-fetch-a-list-final-forked-zl0vb can u plz check and help me out. – sneha Apr 26 '21 at 15:55
Be specific about the error you. are getting, before asking the question, what is the error, what have you tried? – Ashish Apr 26 '21 at 18:59

How to fetch data URL

2 Answers2