Pulling and displaying API data to tailwind cards-CodePudding

could someone help on how to get all data from this console log? I am trying to display all the details in individual tailwind cards but not sure how to get the data. Thank you for your time.

  axios.get('https://api.url**.com/api/v1/content/publications',{
      headers: {
       'X-AUTH-TOKEN' : '22***8a8369317***********'
      }
    }
  )

.then(response => { 
   console.log (response.data)

It works and I get the results below in console.

when I tried console.log (response.data.0.pdf) for example, it gives an error "Parsing error: Unexpected token, expected".

Is it possible to get all the data under publications into individual cards?

<div >
    <a href="#">
        <h5 >**{author}**</h5>
    </a>
    <p >
**{pdf}**
**{id}**
**{etc}**</p>
    <a href="#" >
        Read more
        <svg aria-hidden="true"  fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </a>
</div>

Thanks again for your time.

CodePudding user response：

From what I can tell it seems you are already fetching all the data since the response is an array. It seems like your question is then how to save and render the response data.

Create a local state variable to hold the fetched data. When this state is updated React will trigger a rerender with the latest state enclosed in scope.
```
const [data, setData] = React.useState([]); 
```

Fetch the data in a component lifecycle method/hook, e.g. useEffect when the component mounts, and enqueue a state update to save the fetched data.

useEffect(() => {
  axios.get('https://api.url**.com/api/v1/content/publications',{
    headers: {
     'X-AUTH-TOKEN' : '22***8a8369317***********'
    }
  })
    .then(response => { 
      console.log(response.data);
      setData(response.data); // <-- save response to state
    });
}, []);

Render the local state to JSX. Arrays are typically mapped to JSX, e.g. Array.prototype.map. Each mapped element object is accessible in the map callback, e.g. item.author. Don't forget to also include a key prop on the outer-most mapped element. The React key is used as part of React's reconciliation process when it's computing what needs to refreshed to the DOM.

{data.map(item => (
  <div
    key={item.id}
    
  >
    <a href="#">
      <h5 >
        {item.author}
      </h5>
    </a>
    <p >
      {item.pdf}
      {item.id}
      {item.etc}
    </p>
    <a
      href="#"
      
    >
      Read more
      <svg
        aria-hidden="true"
        
        fill="currentColor"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fill-rule="evenodd"
          d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
          clip-rule="evenodd"
        />
      </svg>
    </a>
  </div>
))}