I learn React and JavaScript and now I have this problem
Here's a Codesandbox
What happens is like this:
In the Codesandbox at FileEditor.jsx: I mock it like this:
// Mocking the tag list just to test it
const tagMock = ['11111']; // THIS WORKS WITH ONLY ONE ITEM
// Mocking the tag list just to test it
//const tagMock = ["11111", "22222", "33333"]; // THIS DOES NOT WORK WITH MULTIPLE ITEMS
The tagMock that works in the first one with only one array value.
The tagMock that does not work is the one with 3 values.
(when you star sandbox the tagMock with only one array value is use, please change to tagMock with 3 array values to see the error)
If you look further down in FileEditor.jsx you see where tagMock is use like this:
{tagMock.map((tag) => (
<div className="tagInput">
<button
className="btn btn-warning btn-sm"
disabled={false}
key={tag}
type="button"
// onClick={() => remove(skill)}
>
<TagName tag={tag} />
</button>
</div>
))}
Every button created in this map loop have it's own <TagName tag={tag} />
The TagName is a component that is connected to the Redux Store and there
it selected (using reselect), the store tags and then return the tag name only.
The button name text is by so dynamically set like this:
In the image above, the "name2" button text is set" .
The problem is that this does not work if more then 1 button like this:
//const tagMock = ["11111", "22222", "33333"]; // THIS DOES NOT WORK WITH MULTIPLE ITEMS
The error I get is the name is not defend in the tagName.jsx file.
Why does this happen? I understand it's some form of component duplications issue that the map loop can't create the tagName Component as it should, but I can't figure it out.
