Fix testimonials of key prop error

[sakit0]

I fixed Product page key prop error.

[erquhart]

Thanks for the PR!

The commits here don't seem to address the issue, did you push the right branch?

[sakit0]

@ekoeryanto
sorry.
I forgot push.

[ekoeryanto]

@mki-skt, anything I can help?

[sakit0]

@ekoeryanto
sorry.
I made a mistake.

[sakit0]

@erquhart
Thanks🙌

[AustinGreen]

@mki-skt although there are exceptions to the rule, it is generally considered an anti-pattern to use index as keys (read more here: https://reactjs.org/docs/lists-and-keys.html#keys). I like the uuid package for generating unique identifiers

import { v4 } from 'uuid';

const Testimonials = ({ testimonials }) => (
  <div>
    {testimonials.map((testimonial,index) => (
      <article key={v4()} className="message">
        <div className="message-body">
          {testimonial.quote}
          <br />
          <cite> – {testimonial.author}</cite>
        </div>
      </article>
    ))}
  </div>
)

[erquhart]

My only reasoning here is that this isn't an app, so those maps are static and won't ever change. But yeah, agreed on the general and proper route being unique id's.

[sakit0]

@AustinGreen
Thank you🙌
It is certainly best to unique a key,But I did not know uuid, I felt it was bored to generate,
I learned uuid and studied!👏

I will fix it!

[sakit0]

I fixed it.
2ef0326
272f15d

[sakit0]

@erquhart @AustinGreen
As a result of various experiments, when uuid is used, uuid changes and re-renders when you state change it, what do you think?

[erquhart]

If you're going to use uuid to generate keys, you need those keys to not change - generating a new key on every render has the same net effect as using indexes. That being the case, you either need to add the id to the data before it's passed in as a component prop, or else use a stateful component and create the key in a lifecycle method other than render, or in the constructor.