mxmzb / react-aiwriter

Typewriter effect inspired by ChatGPT 🤖
https://maximzubarev.com/ai-will-steal-your-job
MIT License
38 stars 2 forks source link

React throws unique "key" prop warning when using multiple tags like <div> inside <AIWriter> #2

Open malaccan opened 1 year ago

malaccan commented 1 year ago

AIWriter works awesome, but it gives the warning below when i use multiple tags like this:

This is a test
Another line

[Error] Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.

007AnupamSharma commented 1 year ago

you should add a unique key or id to every div when you are rendering your div

malaccan commented 1 year ago

even with the keys added, react gives the same warning error. it can be reproduced with this example:

<AIWriter>
    <div key="1">some word</div>
    <div key="2">more text</div>
</AIWriter>

produces error:

[Error] Warning: Each child in a list should have a unique "key" prop.
See https://reactjs.org/link/warning-keys for more information.

the error goes away only if there is a single <div> component within the <AIWriter> block. however, AIWriter does not process <br/> for line breaks, so trying to replace multiple <div> with <br/> doesn't work as well.

thanks