Export pdf in kendo react exports only the last item inside map

Question

I'm trying to export as a pdf a few items, where every item has a button that should export as a pdf a specific item. I also tried to give a key to each child, but it didn't work.

Here's my code:

import './Logout.css';

import React, { useRef } from "react";

import { NavLink } from 'react-router-dom';

import { PDFExport } from '@progress/kendo-react-pdf';

const Logout = () => {

 const data = [

    { id: 1, name: 'Item 1', value: 100 },
    { id: 2, name: 'Item 2', value: 200 },
    { id: 3, name: 'Item 3', value: 300 },

  ];

const pdfExport = useRef(null);

  const exportPDF = () => {
    pdfExport.current.save();
  };

  return (
    <div className='logOutStyle'>
      <h1> you just loged out</h1>
      <h3> to sing in again click here</h3>


      {data.map((item, i) => (
      <div key={item.id}>
        <PDFExport key={item.id} ref={pdfExport} paperSize="A4" margin="2cm">
          <p key={data[i]}>{data[i].name}</p>
        </PDFExport>
        <button key={item.id} onClick={exportPDF}>Export PDF</button>
      </div>
    ))}

      <NavLink to="/" className="underline text-tertiary">
            return to home page
      </NavLink>
    </div>
 )
}

export default Logout;

There is no relevant and updated answer for that in kendo react docs or chat gpt. Please help me.

I did research on all over kendo react docs, chat gpt. I hope someone will wake up and see the huge problem.

Answer 1

pdfExport is the same for all the data which is printed by map so that makes the pdfExport different for all the data. so the solution is to make one component. whatever data is inside the map that all data will be placed in the component and that component placed inside the map so that Different pdfExport will be created for all data.