Notes > generate keys for your list item ( react )

generate keys for your list item ( react )

I usually just use an index for my key values when creating a list of items in React, and for me, that will do. This will solve my issue with need a key for your list items (not the actual warning) warning message in my console when building React applications., index) => (
	<li key={index}>

I found out about this recently as a great way to generate a key id on your list of items. crypto.randomUUID() generates a unique key for you.

We’ll need to generate them dynamically when we get our list item. So more code 😅

// for eaxample we have a list of items we need to display for example tags

export default function Tags({tags}){
	//1. add our data to useState
	const [useTags, setTags] = useState(null)

	//2. create a useEffect function that when data is available create a id for them
  useEffect(() => {
    const techWithId = => {
      return {
        name: item,
        id: crypto.randomUUID(),
    return setTags(techWithId);
  }, [tags]);

				//3. then display your new data with id
				useTags && => <li key={}>{}</li>)}

Tags 🏷

  • ReactJs
  • Javascript