How to show react variable values in loop in table td tag

Question

i use axios to get values, now i want to display the values in td tag in a loop how to execute it.

my code is :

let apiUrl = "http://api_url_here";
axios.get(apiUrl, {headers: headers})
  .then((response) => {
    console.log(response.data[0].provider.firstName);
    //console.log(token);[0]
  })

My td code is:

<tr>
  <td className="font-weight-medium"> <img className="logo" src={jessica} alt="pam-logo" /> </td>
  <td>[email protected] </td>
  <td>(012)-876789876</td>
  <td>Family Physician</td>
  <td>23145655</td>
  <td>Mountain view,Ave</td>
  <td><Icon icon={editIcon} width="20px"/>&nbsp;&nbsp;<Icon icon={deleteIcon} width="20px"/></td>
</tr>

I need that response.data[0].provider.firstName in 1st td and correspondingly the same for all and it should be in loop to get next iteration.

Are you using class component for this?

Muhammad Zeeshan
– Muhammad Zeeshan

2020-02-19 11:29:37 +00:00
Commented Feb 19, 2020 at 11:29 — Muhammad Zeeshan
– Muhammad Zeeshan, Commented Feb 19, 2020 at 11:29
@MuhammadZeeshan yes

Sabrilogesh K
– Sabrilogesh K

2020-02-19 11:30:17 +00:00
Commented Feb 19, 2020 at 11:30 — Sabrilogesh K
– Sabrilogesh K, Commented Feb 19, 2020 at 11:30
Can you show the value of response.data?

Muhammad Zeeshan
– Muhammad Zeeshan

2020-02-19 11:30:25 +00:00
Commented Feb 19, 2020 at 11:30 — Muhammad Zeeshan
– Muhammad Zeeshan, Commented Feb 19, 2020 at 11:30
@MuhammadZeeshan its only a json object with name,mail etc

Sabrilogesh K
– Sabrilogesh K

2020-02-19 11:37:58 +00:00
Commented Feb 19, 2020 at 11:37 — Sabrilogesh K
– Sabrilogesh K, Commented Feb 19, 2020 at 11:37

Maciej Trzciński · Accepted Answer · 2020-02-19 11:54:00Z

1

try this.

import React, {useState, useEffect} from 'react'

const myFunction = () => {
  const [ data, setData ] = useState(null)

  const apiUrl = "http://api_url_here"

  useEffect(() => {
    axios.get(apiUrl, {headers: headers})
      .then((response) => {
         setData(response.data)
      })
  }, [])


  return (
    <>
      {
        data && data.map((item, index) => (
          <tr key={index}>
            <td>{item.provider.firstName}</td>
            ...
          </tr>
        ))
      }
    </>
  )
}

edited Feb 19, 2020 at 11:54

answered Feb 19, 2020 at 11:46

Maciej Trzciński

1811 gold badge2 silver badges9 bronze badges

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

Comments

Jeremy Jones · Accepted Answer · 2020-02-19 11:34:11Z

0

Your axios call should ordinarily be in an initialization stage, such as by employing useEffect or componentDidMount, depending on the style of your component.

Then you set the data using your response, e.g.

setData(response.data);

or

this.setState({"myData": response.data});

and in your render, you use that data loop to generate the rows, something along the lines of:

const { myData } = this.state;
myData.map((datum, index) => {
   <tr key={index}>
     <td>{datum.provider.firstName}</td>
     ...
   </tr>
});

edited Feb 19, 2020 at 11:34

answered Feb 19, 2020 at 11:30

Jeremy Jones

5,7414 gold badges23 silver badges28 bronze badges

1 Comment

Sabrilogesh K Over a year ago

No its not working, show datum and index is not defined error

amq · Accepted Answer · 2020-02-19 11:45:51Z

0

If response.data is the list with your table content, add this to your render() method:

return response.data.map((item, index) => {
   <tr key={index}>
      <td>{item.foo}</td>
      <td>{item.bar}</td>
      ...
   </tr>
});

edited Feb 19, 2020 at 11:45

answered Feb 19, 2020 at 11:32

amq

1734 silver badges18 bronze badges

1 Comment

amq Over a year ago

Was missing a (, fixed now

Collectives™ on Stack Overflow

How to show react variable values in loop in table td tag

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related