If I want to return one of my components from a map, can I just do this?
<Component data={data} key={`component-${data.id}`} />
or, are you supposed to do something like this, within the component itself?
const Component = ({data}) => {
return (
<div key={`component-${data.id}`}>
// Rest of component
</div>
)
}
Both approaches are fine they work both its your own personal preference honestly I think if you do it like the first example you won't get warnings I assume you're trying something like this hope this clears it up if not let me know
return (
<>
{Dataa.map((data) =>
<Component data={data} key=
{`component-${data.id}`} />
)}
</>
);
Refer docs for further clarification: https://reactjs.org/docs/lists-and-keys.html