how to fetch id from http url in react

Question

In my code i want to make when i select on radio button then click submit button then url is open this is fine right now.

But i want to make when i select on radio button and click on submit button then url is open with id fetch

and id is fetched in api on the basis of row select.

my full code is here plz check https://codesandbox.io/s/react-example-forked-hvisq?file=/index.js

i want to make when i select row and click on submit button then this type url is open http://commondatastorage.googleapis.com/codeskulptor-assets/space%20station.png/id/1 like that on another row when i select row and click on button then this type url is open http://commondatastorage.googleapis.com/codeskulptor-assets/space%20station.png/id/2.

but right now its simply url open without fetch id on the basis of select http://commondatastorage.googleapis.com/codeskulptor-assets/space%20station.png.

How can we do that.any idea on that

my code https://codesandbox.io/s/react-example-forked-hvisq?file=/index.js

 handleClick = () => {
    console.log(this.state.selectedId);
    const apiUrl = "https://mocki.io/v1/b512f8b8-64ab-46e4-9e0c-9db538a0ad9e";
    if (this.state.selectedId) {
      console.log(this.state.selectedId);
      fetch(apiUrl)
        .then((response) => response.json())
        .then((data) => {
          this.setState({ data: data });
          console.log("This is your data", data);
          switch (this.state.selectedId) {
            case "1":
              window.open(
                "http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/double_ship.png",
                "_blank"
              );
              break;
            case "2":
              window.open(
                "http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/double_ship.png",
                "_blank"
              );
              break;
            default:
              break;
          }
        });
    } else {
      alert("Data not fetched!");
    }
  };

anybody help me out its very thankful.

anybody plz help me out. its very thankful. i m stuck on that — sneha
– sneha, Commented May 13, 2021 at 15:00
@ShivamJha as u can see my code codesandbox.io/s/react-example-forked-hvisq?file=/index.js when i select row and click on submit button the url is opened ok but i wnat to make url with id commondatastorage.googleapis.com/codeskulptor-assets/… like that — sneha
– sneha, Commented May 13, 2021 at 15:04
@ShivamJha hope u getting my point.and is it possible to do that?? — sneha
– sneha, Commented May 13, 2021 at 15:04
@rennukumari so data is an array of objects, You want to pick the url of the object in the data array where the id matches this.state.selectedId.? — painotpi
– painotpi, Commented May 13, 2021 at 15:09

Rahul Khunt · Accepted Answer · 2021-05-13 15:08:44Z

3

I believe it's very straightforward unless I'm misinterpreting the question.

Here is the fork and I did the change on line 48 and 54 in the window.open function.

https://codesandbox.io/s/react-example-forked-30glc

answered May 13, 2021 at 15:08

Rahul Khunt

6935 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nisanth Reddy · Accepted Answer · 2021-05-13 15:08:03Z

1

You basically just had to add the "/id/" + this.state.selectedId part to your url and that's it.

Is this what you wanted ?

https://codesandbox.io/s/react-example-forked-wkrjw?file=/index.js

answered May 13, 2021 at 15:08

Nisanth Reddy

6,4801 gold badge16 silver badges31 bronze badges

Comments

painotpi · Accepted Answer · 2021-05-13 15:15:33Z

0

If I understand correctly, data is an array of objects which looks like,

{
  id: number,
  url: string
}

You want to pick the url of the object in the data array where the id matches this.state.selectedId.

You can replace your switch statement with the following,

window.open(data.find((d) => d.id === Number(this.state.selectedId)).url);

Forked example: https://codesandbox.io/s/react-example-forked-5mr12?file=/index.js

answered May 13, 2021 at 15:15

painotpi

7,0122 gold badges40 silver badges72 bronze badges

Collectives™ on Stack Overflow

how to fetch id from http url in react

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related