Printing HTML generated by .map

[foxjordan]

Trying to create a PDF of articles. The articles are displayed on the page by mapping through its sub-sections. This works when there is only one sub-section, but doesn't even trigger the browser's print pane when there's more than one. Is this something dumb that I'm doing or a limitation of the library?

const createPDF = async () => {
        print("pdf", "html")

    }

<button onClick={createPDF}>create pdf</button>
 <div  id="pdf">
                        {article?.attributes?.section.map((sec) =>
                            <details  open key={section.id}>
                                <summary>
                                    <h id={sec.title}>{sec.title}</h4>
                                </summary>
                                <div>{parse(sec.content)}</div>        
                            </details>
                        )}
                    </div>

 "dependencies": {

    "@react-pdf/renderer": "^3.0.0",
    "axios": "^0.27.2",
    "cookie": "^0.5.0",
    "cookie-cutter": "^0.2.0",
    "daisyui": "^2.31.0",
    "graphql": "^16.6.0",
    "html-react-parser": "^3.0.4",
    "html2canvas": "^1.4.1",
    "js-cookie": "^3.0.1",
    "jspdf": "^2.5.1",
    "next": "12.2.5",
    "next-auth": "^4.12.2",
    "print-js": "^1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.12",
    "eslint": "8.22.0",
    "eslint-config-next": "12.2.5",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8"
  }

[JandersonConstantino]

@foxjordan your code have issues.

1 - HTML h4 tag issue

// wrong
<h id={sec.title}>{sec.title}</h4>
// right
<h4 id={sec.title}>{sec.title}</h4>

2 - key issue.

// wrong
<details  open key={section.id}>
// right
<details  open key={sec.id}>

@crabbly I believe it issue must be closed. I do a test with map in React.js and it works normally.

CodeSandbox https://codesandbox.io/s/loving-danny-3jq6y2