Pulling and displaying API data to tailwind cards

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 class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
    <a href="#">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">**{author}**</h5>
    </a>
    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
**{pdf}**
**{id}**
**{etc}**</p>
    <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
        Read more
        <svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" 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.

Answer

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.

1. 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([]); 
   

2. 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
       });
   }, []);
   

3. 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}
       class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700"
     >
       <a href="#">
         <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
           {item.author}
         </h5>
       </a>
       <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
         {item.pdf}
         {item.id}
         {item.etc}
       </p>
       <a
         href="#"
         class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
       >
         Read more
         <svg
           aria-hidden="true"
           class="w-4 h-4 ml-2 -mr-1"
           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>
   ))}