How to pass data from one component to another while using API in reactjs

Question

In React, we can pass data from one component to another using props but I want to know how to pass data from one component to another while issueing an API request.

In the backend, the signin credentials are authenticated using "JWT authentication".

How to pass the the username while the user is getting logged in? When the user get's logged in, my page should show "welcome ".

You can check out the code in this CodeSanbox

Here is the json data from the API:

{
  item: [
    {
      "id": "145741863",
      "firstName": "ABCDEF",
      "email": "[email protected]",
      "password": "Aertyuio",
    }
  ]
}

Muhammad Zeeshan · Accepted Answer · 2020-02-19 06:58:44Z

4

You can do it like this:

axios
      .post(`/api/Login/auth`, data, {
        headers: { "Content-Type": "application/json" }
      })
      .then(res => {
        console.log(res);
        this.props.history.push("/Welcome", { ...res });
      })
      .catch(err => {
        console.log(err.response.data.message);
        var res = err.response.data.message;
        this.setState({ errorMsg: res });
      });

And as you are sending JSON Web Token as data, you can access it as:

this.props.data.item[0].firstName

Hope this works for you.

edited Feb 19, 2020 at 6:58

answered Feb 16, 2020 at 18:22

Muhammad Zeeshan

4,7784 gold badges19 silver badges42 bronze badges

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

2 Comments

Arunya Over a year ago

HI i'm getting the value as undefined. Could you assist me where i'm going wrong. I have updated json data in the query

Muhammad Zeeshan Over a year ago

Look for the response you are receiving via axios. And access the property accordingly. I have also updated my answer. Try that also.

Tharun208 · Accepted Answer · 2020-02-16 18:48:47Z

0

Since you are using react-router push method. It also has the ability to send different props value along with your pathname and this push will work only on components wrapped in .

In your case, you need to pass a state along with your route name. Below changes, you have to pass state along with your route name in history.push.

this.props.history.push("/Welcome", { ...res }); on Login.js.

And get the response values on your Welcome.js by using this.props.location.state.firstName.

Attaching the document for your reference - https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md

And Also, I attached a basic demonstration of history.push in this - https://codesandbox.io/s/broken-flower-hbglx.

edited Feb 16, 2020 at 18:48

answered Feb 16, 2020 at 18:32

Tharun208

1037 bronze badges

2 Comments

Arunya Over a year ago

I'm getting the value undefined. Could you assist me where i'm going wrong. I have updated json data in the query.

Tharun208 Over a year ago

could you check whether your response is coming through the this.props.location.state.If it is undefined means then check on your history.push

laxman · Accepted Answer · 2020-02-19 07:06:56Z

0

One possible solution would be to use some state management library such as redux.

Otherwise you will need to have a component that will do this fetching stuff and this component should be a common ancestor to the components that will be at least affected with the data changes from API.

My objective is how to pass the the user name while user is getting logged in. When User gets logged in then it should show "welcome Username".

As a more generic solution, you can create a HOC that will do the fetching API stuff and return a new component with the data from the API injected as props.

answered Feb 19, 2020 at 7:06

laxman

2,1604 gold badges19 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to pass data from one component to another while using API in reactjs

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related