gpt4-pdf-chatbot-langchain
gpt4-pdf-chatbot-langchain copied to clipboard
error on launch when i send message
next-dev.js?613c:20 Warning: Each child in a list should have a unique "key" prop.
Check the render method of Home
. See https://reactjs.org/link/warning-keys for more information.
at Home (webpack-internal:///./pages/index.tsx:30:78)
at main
at MyApp (webpack-internal:///./pages/_app.tsx:12:11)
at PathnameContextProviderAdapter (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/shared/lib/router/adapters.js:62:11)
at ErrorBoundary (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:301:63)
at ReactDevOverlay (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:850:919)
at Container (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/index.js:62:1)
at AppContainer (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/index.js:172:11)
at Root (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/index.js:347:11)
The error is caused because there isn't a unique "key" prop for each child in the chatMessages and message.sourceDocs list. I will make a PR to fix this shortly, in the meantime tweak the code as follows to change the div key
:
For chatMessages:
{chatMessages.map((message, index) => {
// ...
return (
<>
<div key={`chatMessage-${index}`} className={className}>
{icon}
<div className={styles.markdownanswer}>
<ReactMarkdown linkTarget="_blank">
{message.message}
</ReactMarkdown>
</div>
</div>
// ...
For message.sourceDocs:
{message.sourceDocs.map((doc, index) => (
<div key={`sourceDoc-${index}`}>
<AccordionItem value={`item-${index}`}>
<AccordionTrigger>
<h3>Source {index + 1}</h3>
</AccordionTrigger>
<AccordionContent>
<ReactMarkdown linkTarget="_blank">
{doc.pageContent}
</ReactMarkdown>
<p className="mt-2">
<b>Source:</b> {doc.metadata.source}
</p>
</AccordionContent>
</AccordionItem>
</div>
))}