how to uniquely identify tags in react

I am trying to access tags on an article using react. At the backend, I implemented tagging functionality using Django-taggit and the tags are returned as an array of strings.

enter image description here

Then, this is how I have implemented looping through the tags in react

<ul className="tags" >

    {!article.tags ? "" : article.tags.map(tag => (



       <Link to="/view-articles">

          <li className="d-inline tag-name" 

              key={tag}

              value={tag}>

              {tag}

          </li>

       </Link>



    ))}

</ul>

The problem is, react gives the error ‘Missing "key" prop for element in iterator’
How do I go about resolving this? It seems I need a unique identifier for each tag for this to work

asked Nov 21 at 6:54

frre tyy

5119

add a comment |

I am trying to access tags on an article using react. At the backend, I implemented tagging functionality using Django-taggit and the tags are returned as an array of strings.

enter image description here

Then, this is how I have implemented looping through the tags in react

<ul className="tags" >

    {!article.tags ? "" : article.tags.map(tag => (



       <Link to="/view-articles">

          <li className="d-inline tag-name" 

              key={tag}

              value={tag}>

              {tag}

          </li>

       </Link>



    ))}

</ul>

The problem is, react gives the error ‘Missing "key" prop for element in iterator’
How do I go about resolving this? It seems I need a unique identifier for each tag for this to work

asked Nov 21 at 6:54

frre tyy

5119

add a comment |

I am trying to access tags on an article using react. At the backend, I implemented tagging functionality using Django-taggit and the tags are returned as an array of strings.

enter image description here

Then, this is how I have implemented looping through the tags in react

<ul className="tags" >

    {!article.tags ? "" : article.tags.map(tag => (



       <Link to="/view-articles">

          <li className="d-inline tag-name" 

              key={tag}

              value={tag}>

              {tag}

          </li>

       </Link>



    ))}

</ul>

The problem is, react gives the error ‘Missing "key" prop for element in iterator’
How do I go about resolving this? It seems I need a unique identifier for each tag for this to work

asked Nov 21 at 6:54

frre tyy

5119

I am trying to access tags on an article using react. At the backend, I implemented tagging functionality using Django-taggit and the tags are returned as an array of strings.

enter image description here

Then, this is how I have implemented looping through the tags in react

<ul className="tags" >

    {!article.tags ? "" : article.tags.map(tag => (



       <Link to="/view-articles">

          <li className="d-inline tag-name" 

              key={tag}

              value={tag}>

              {tag}

          </li>

       </Link>



    ))}

</ul>

The problem is, react gives the error ‘Missing "key" prop for element in iterator’
How do I go about resolving this? It seems I need a unique identifier for each tag for this to work

reactjs django-taggit

asked Nov 21 at 6:54

frre tyy

5119

asked Nov 21 at 6:54

frre tyy

5119

asked Nov 21 at 6:54

frre tyy

5119

asked Nov 21 at 6:54

frre tyy

5119

asked Nov 21 at 6:54

frre tyy

5119

add a comment |

2 Answers
2

active

oldest

votes

Add a key prop to Link.You don't need key on the li element.You need it at the topmost element of the JSX that your are repeating in map.Keep in mind that the key prop should be a unique constant.If your tags are unique,then just use the tag value or i prefer to do something like this.
Concatenating the tag and index so that even if the tag repeats,the resulting string will be unique.

   article.tags.map((tag,index) => (



       <Link key = {`${tag}-index`} to="/view-articles">

          <li className="d-inline tag-name" 

             value={tag}>

           {tag}

        </li>

   </Link>

As a sidenote, {${tag}-index} just means {tag + '' + index}.I prefer ES6 template literals to string concatenation.

answered Nov 21 at 7:22

anuragb26

16214

disagree on using index there. this way if I put new tag at first position it it would completely recreate the list since no key was matched. it's known pitfall of using indexas a part of key. Also I believe there will be no duplicated tags since it does not make sense
– skyboyer
Nov 21 at 7:27

I had a scenario where the list value was repeating and i had to render it anyway.So i had to concatenate it.Incase ,you are sure of not repeating then by all means avoid the index.
– anuragb26
Nov 21 at 7:35

then you may use unique id(actually it should be first coming in mind to use with key). I can not imagine a case when you can have duplicated values without id and still able to distinguish duplicates when say editing one of them
– skyboyer
Nov 21 at 8:25

Thanks, this resolved the issue.
– frre tyy
Nov 21 at 11:25

add a comment |

If you look closer at your code, you'll see that the element that is output in the iterator is not the li element (on which you've placed key property), but the Link. Try this:

<ul className="tags" >

    {!article.tags ? "" : article.tags.map(tag => (



       <Link to="/view-articles" key={tag}>

          <li

              className="d-inline tag-name" 

              value={tag}

          >

              {tag}

          </li>

       </Link>



    ))}

</ul>

answered Nov 21 at 7:25

Cerberus

784519

Thanks, this resolved the issue.
– frre tyy
Nov 21 at 11:24

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53406695%2fhow-to-uniquely-identify-tags-in-react%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

   article.tags.map((tag,index) => (



       <Link key = {`${tag}-index`} to="/view-articles">

          <li className="d-inline tag-name" 

             value={tag}>

           {tag}

        </li>

   </Link>

As a sidenote, {${tag}-index} just means {tag + '' + index}.I prefer ES6 template literals to string concatenation.

answered Nov 21 at 7:22

anuragb26

16214

disagree on using index there. this way if I put new tag at first position it it would completely recreate the list since no key was matched. it's known pitfall of using indexas a part of key. Also I believe there will be no duplicated tags since it does not make sense
– skyboyer
Nov 21 at 7:27

I had a scenario where the list value was repeating and i had to render it anyway.So i had to concatenate it.Incase ,you are sure of not repeating then by all means avoid the index.
– anuragb26
Nov 21 at 7:35

then you may use unique id(actually it should be first coming in mind to use with key). I can not imagine a case when you can have duplicated values without id and still able to distinguish duplicates when say editing one of them
– skyboyer
Nov 21 at 8:25

Thanks, this resolved the issue.
– frre tyy
Nov 21 at 11:25

add a comment |

   article.tags.map((tag,index) => (



       <Link key = {`${tag}-index`} to="/view-articles">

          <li className="d-inline tag-name" 

             value={tag}>

           {tag}

        </li>

   </Link>

As a sidenote, {${tag}-index} just means {tag + '' + index}.I prefer ES6 template literals to string concatenation.

answered Nov 21 at 7:22

anuragb26

16214

disagree on using index there. this way if I put new tag at first position it it would completely recreate the list since no key was matched. it's known pitfall of using indexas a part of key. Also I believe there will be no duplicated tags since it does not make sense
– skyboyer
Nov 21 at 7:27

I had a scenario where the list value was repeating and i had to render it anyway.So i had to concatenate it.Incase ,you are sure of not repeating then by all means avoid the index.
– anuragb26
Nov 21 at 7:35

then you may use unique id(actually it should be first coming in mind to use with key). I can not imagine a case when you can have duplicated values without id and still able to distinguish duplicates when say editing one of them
– skyboyer
Nov 21 at 8:25

Thanks, this resolved the issue.
– frre tyy
Nov 21 at 11:25

add a comment |

   article.tags.map((tag,index) => (



       <Link key = {`${tag}-index`} to="/view-articles">

          <li className="d-inline tag-name" 

             value={tag}>

           {tag}

        </li>

   </Link>

As a sidenote, {${tag}-index} just means {tag + '' + index}.I prefer ES6 template literals to string concatenation.

answered Nov 21 at 7:22

anuragb26

16214

   article.tags.map((tag,index) => (



       <Link key = {`${tag}-index`} to="/view-articles">

          <li className="d-inline tag-name" 

             value={tag}>

           {tag}

        </li>

   </Link>

As a sidenote, {${tag}-index} just means {tag + '' + index}.I prefer ES6 template literals to string concatenation.

answered Nov 21 at 7:22

anuragb26

16214

answered Nov 21 at 7:22

anuragb26

16214

answered Nov 21 at 7:22

anuragb26

16214

answered Nov 21 at 7:22

anuragb26

16214

disagree on using index there. this way if I put new tag at first position it it would completely recreate the list since no key was matched. it's known pitfall of using indexas a part of key. Also I believe there will be no duplicated tags since it does not make sense
– skyboyer
Nov 21 at 7:27

I had a scenario where the list value was repeating and i had to render it anyway.So i had to concatenate it.Incase ,you are sure of not repeating then by all means avoid the index.
– anuragb26
Nov 21 at 7:35

then you may use unique id(actually it should be first coming in mind to use with key). I can not imagine a case when you can have duplicated values without id and still able to distinguish duplicates when say editing one of them
– skyboyer
Nov 21 at 8:25

Thanks, this resolved the issue.
– frre tyy
Nov 21 at 11:25

add a comment |

disagree on using index there. this way if I put new tag at first position it it would completely recreate the list since no key was matched. it's known pitfall of using indexas a part of key. Also I believe there will be no duplicated tags since it does not make sense
– skyboyer
Nov 21 at 7:27

I had a scenario where the list value was repeating and i had to render it anyway.So i had to concatenate it.Incase ,you are sure of not repeating then by all means avoid the index.
– anuragb26
Nov 21 at 7:35

then you may use unique id(actually it should be first coming in mind to use with key). I can not imagine a case when you can have duplicated values without id and still able to distinguish duplicates when say editing one of them
– skyboyer
Nov 21 at 8:25

Thanks, this resolved the issue.
– frre tyy
Nov 21 at 11:25

disagree on using index there. this way if I put new tag at first position it it would completely recreate the list since no key was matched. it's known pitfall of using indexas a part of key. Also I believe there will be no duplicated tags since it does not make sense
– skyboyer
Nov 21 at 7:27

I had a scenario where the list value was repeating and i had to render it anyway.So i had to concatenate it.Incase ,you are sure of not repeating then by all means avoid the index.
– anuragb26
Nov 21 at 7:35

then you may use unique id(actually it should be first coming in mind to use with key). I can not imagine a case when you can have duplicated values without id and still able to distinguish duplicates when say editing one of them
– skyboyer
Nov 21 at 8:25

Thanks, this resolved the issue.
– frre tyy
Nov 21 at 11:25

add a comment |

If you look closer at your code, you'll see that the element that is output in the iterator is not the li element (on which you've placed key property), but the Link. Try this:

<ul className="tags" >

    {!article.tags ? "" : article.tags.map(tag => (



       <Link to="/view-articles" key={tag}>

          <li

              className="d-inline tag-name" 

              value={tag}

          >

              {tag}

          </li>

       </Link>



    ))}

</ul>

answered Nov 21 at 7:25

Cerberus

784519

Thanks, this resolved the issue.
– frre tyy
Nov 21 at 11:24

add a comment |

If you look closer at your code, you'll see that the element that is output in the iterator is not the li element (on which you've placed key property), but the Link. Try this:

<ul className="tags" >

    {!article.tags ? "" : article.tags.map(tag => (



       <Link to="/view-articles" key={tag}>

          <li

              className="d-inline tag-name" 

              value={tag}

          >

              {tag}

          </li>

       </Link>



    ))}

</ul>

answered Nov 21 at 7:25

Cerberus

784519

Thanks, this resolved the issue.
– frre tyy
Nov 21 at 11:24

add a comment |

If you look closer at your code, you'll see that the element that is output in the iterator is not the li element (on which you've placed key property), but the Link. Try this:

<ul className="tags" >

    {!article.tags ? "" : article.tags.map(tag => (



       <Link to="/view-articles" key={tag}>

          <li

              className="d-inline tag-name" 

              value={tag}

          >

              {tag}

          </li>

       </Link>



    ))}

</ul>

answered Nov 21 at 7:25

Cerberus

784519

If you look closer at your code, you'll see that the element that is output in the iterator is not the li element (on which you've placed key property), but the Link. Try this:

<ul className="tags" >

    {!article.tags ? "" : article.tags.map(tag => (



       <Link to="/view-articles" key={tag}>

          <li

              className="d-inline tag-name" 

              value={tag}

          >

              {tag}

          </li>

       </Link>



    ))}

</ul>

answered Nov 21 at 7:25

Cerberus

784519

answered Nov 21 at 7:25

Cerberus

784519

answered Nov 21 at 7:25

Cerberus

784519

answered Nov 21 at 7:25

Cerberus

784519

Thanks, this resolved the issue.
– frre tyy
Nov 21 at 11:24

add a comment |

Thanks, this resolved the issue.
– frre tyy
Nov 21 at 11:24

Thanks, this resolved the issue.
– frre tyy
Nov 21 at 11:24

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk