We Keep Coding

React "Warning: Encountered two children with the same key"

I have a React app that mapping cards and each card have unique id although I'm getting error in console that some are not unique:
Warning: Encountered two children with the same key, 2294264. Keys
should be unique so that components maintain their identity across
updates. Non-unique keys may cause children to be duplicated and/or
omitted — the behavior is unsupported and could change in a future
version.
Here is the code for building my card structure:
function CreateCards(doc) {
return (
<SimpleCard
key={doc.newsid}
theCardId={doc.newsid}
categorietitle={doc.categorietitle}
newstitle={doc.newstitle}
date={format(new Date(doc.date), "dd/MM/yyyy")}
thenews={doc.thenews}
newsurl={doc.newsurl}
/>
);
}
And here is the code for mapping the cards:
<div className="general-card1">
{this.state.noPlaceFound ? (
<h3 className="noPlaceFound">
<i className="fas fa-exclamation-circle fa-sm WarnIcon"></i>
لا يوجد نتائج
</h3>
) : (
this.state.WasMap.map((v) => CreateCards(v._source))
)}
</div>
Can you please help me?

When you render a list of components with map(), each component should have a unique key property. It is for React to distinguish them.
Rendering a todo list, for example:
{todos.map((todo) => (<li key={todo.id}>{todo.text}</li>))}
What you did wrong is that you added the key inside the component, where it should be when rendering inside map(), like so:
<div className="general-card1">
{this.state.noPlaceFound ? (
<h3 className="noPlaceFound">
<i className="fas fa-exclamation-circle fa-sm WarnIcon"></i> لا يوجد نتائج
</h3>
) : (
this.state.WasMap.map((v, index) => (<CreateCards doc={v._source} key={index} />))
)}
</div>
Notice that key = {index}. This would work, but it's better to use a custom id if you have one. You can use key = {v._source.newsid} if v._source.newsid is a unique field.
For more visit
keys section on the official documentation.

React isn't updating the visual data, but useState has the right value

I have a weird problem. In my React project I have a useState([]) variable containing information. On the website I have a "add" button that adds a new price-object to the array.
This is then visually shown on the website with map. Each section (object in the array) has a delete-button. When I delete a section it only delete the newly added object. BUT, when I console.log() the updated values, it have deleted right object.
So, to summarize. In the stored values, it deletes correct, but it won't show it right visually. Someone who may be able to help?
Here is the code:
My .map() code, with the code for deleting a section at the bottom:
{courseData.prices?.map((price, i) => {
return (
<div
className='flex flex-wrap bg-white mb-4 p-2 rounded-md shadow-md'
key={i}>
<Input
label='Navn'
value={price.name}
width='1/2'
white
isRequired
handleChange={(e) => updatePrice(e, i, 'name')}
/>
<Input
label='Beskrivelse'
value={price.description}
width='1/2'
white
isRequired
handleChange={(e) => updatePrice(e, i, 'description')}
/>
<Input
label='Pris'
type='number'
width='1/2'
value={price.price}
white
isRequired
handleChange={(e) => updatePrice(e, i, 'price')}
/>
<Input
label='Gyldighet (dager)'
type='number'
width='1/2'
value={price.days}
white
isRequired
handleChange={(e) => updatePrice(e, i, 'days')}
/>
<button
type='button'
onClick={() => {
setCourseData((courseData) => {
return {
...courseData,
prices: courseData.prices.filter((item) => item !== price),
}
})
}}
className='flex items-center min-w-max rounded-md px-2 py-1 m-1 bg-white-light shadow-md font-semibold text-gray-500 active:shadow-none'>
<XIcon className='h-4 w-4' />
<p className='font-medium ml-1'>Fjern</p>
</button>
</div>
)
})}
A picture of the visual components before something is deleted:
A picture of the visual components after number 2 (the middle one) is deleted:
The stored data after the middle one is deleted (you see that the stored data and the visual components dont have the same names):

I tried to recreate the issue here, but everything is working as expected.
I'm guessing that there is some bad data causing this issue, but I also agree with what was suggested in the comments: compare attributes of the objects instead of comparing the objects themselves.
Use this:
setCourseData(courseData => {
return {
...courseData,
prices: courseData.prices.filter(item => item.id !== price.id)
};
instead of this:
setCourseData(courseData => {
return {
...courseData,
prices: courseData.prices.filter(item => item !== price)
};
If this doesn't fix the issue, could you share more of the data?

How to deal with a value that might be an array, or might be only a single item react component

I am very new to react and am trying to make a user survey, in this Component I am working with checkboxes which I find a little tricky. I want the user to choose 2 options and then put a comma between the two chosen options, how can I do that?
Earlier I used stageArtCategory.join(', ') in my Summary.js component but that broke the rendering of Summary in case the user chose only one instead of two options...
CODE:
import React from 'react';
import NextQuestionButton from './NextQuestionButton'
import Popup from './Popup'
const QuestionStageArtCheckbox = ({
stageArtCategory,
setStageArtCategory,
page,
setPage,
onNextQuestion
}) => {
const onStageArtChange = (stageArtValue) => {
if (stageArtCategory.includes(stageArtValue)) {
setStageArtCategory(stageArtCategory.filter((item) => item !== stageArtValue))
} else {
setStageArtCategory([...stageArtCategory, stageArtValue])
}
}
const stageartGroup = [
"I'm for experimental shit, I need to see something I can not immediately understand",
"I want to dance with my kid",
"Opera",
"Theatre",
"Musical",
"Concert",
"I just miss the feeling of collectivity, and long to be able to see something with another person's eye - just once, please!",
"I want to drink beer with my friends after a show"
]
return (
<article className="form-question-3">
{/* Q */}
<p className="form-question" tabIndex="0">
What kind of stage art would you like too experience post Covid-19? Pick 2 as they are made to overlap a little! <span role="img" aria-label="smiling emoji with one eye blinking">😊</span>
</p>
{/* A */}
<div className="question-content-container-3">
{stageartGroup.map((stagearts) => (
<span className="form-checkbox-question-container" key={stagearts}>
<label className="checkbox-label" htmlFor={stagearts}>{stagearts}</label>
<input
id={stagearts}
type="checkbox"
className="form-checkbox"
checked={stageArtCategory.includes(stagearts)}
onChange={() => onStageArtChange(stagearts)}
/>
</span>
))}
<div className="buttons-container-3">
<NextQuestionButton
page={page}
setPage={setPage}
currentState={stageArtCategory.length}
defaultState={0}
message="Please choose what kind of overlapping stage arts you would like to experience first!"
onClick={onNextQuestion}
button="Next question button"
buttontext="Next question"
/>
</div>
</div>
</article>
)
}
export default QuestionStageArtCheckbox

I prefer to always treat such values as an arrays. So, whenever I need to use such value, I turn it into array with .concat method.
function arbitraryFunction(arrayOrSingle) {
let array = [].concat(arrayOrSingle);
// do something with array
}

Initialised the useState as an empty string earlier but changed it to be an empty array. This solved the problem.
const [stageArtCategory, setStageArtCategory] = useState([])

xml tag replace showing different result

I wrote a function in one of my angular project to replace tag with another tag in xml file. First parameter is the HTMLElement, second parameter is the searchTag and third one is replaceTag.
replaceTagWith(xmlCode: HTMLElement, findTag: string, replaceTag: string) {
// Initializing variables
let exists: boolean = true;
let processed: boolean = false;
while (exists) {
let sourceTags = xmlCode.querySelector(findTag);
// If findTag exists
if (sourceTags) {
// Setting processed flag
processed = true;
// Creating replace tag and setting the textcontent
let targetTag = document.createElement(replaceTag);
targetTag.innerHTML = sourceTags.innerHTML;
// Finding attributes of the tags to be replaced
let tagAttributes = sourceTags.attributes;
let attrLength = tagAttributes.length;
// If there is attributes
if (attrLength) {
for (let j = 0; j < attrLength; j++) {
// Setting the attribute of replace tag
targetTag.setAttribute(tagAttributes[j].name, tagAttributes[j].value);
}
}
// Appending the target tag just before the source tag
sourceTags.parentNode.insertBefore(targetTag, sourceTags);
// Removing findTag
sourceTags.parentNode.removeChild(sourceTags);
} else {
exists = false;
}
}
This function works well when i am replacing <title> tag with <sec-title>. Here is the function call..
const parser = new DOMParser();
const xml = parser.parseFromString(this.xmlData, 'application/xml');
let xmlCode: any = xml.documentElement;
this.replaceTagWith(xmlCode, 'title', 'sec-title');
the result will be like:
<sec-title xmlns="http://www.w3.org/1999/xhtml">What is Child Protection<named-content xmlns="http://www.w3.org/1999/xhtml" content-type="index" name="default" a-level="child protection" b-level="definition of" c-level="" d-level="" e-level="" format="" range="" see="" see-also=""></named-content> in Humanitarian Action? </sec-title>
But the problem is that when i try to replace <sec-title> with <title> ,the result showing:
<title xmlns="http://www.w3.org/1999/xhtml">What is Child Protection<named-content xmlns="http://www.w3.org/1999/xhtml" content-type="index" name="default" a-level="child protection" b-level="definition of" c-level="" d-level="" e-level="" format="" range="" see="" see-also=""></named-content> in Humanitarian Action? </title>
the html tags (here <named-content>) inside the <title> get replaced with <named-content>
This is the portion of xml I am working with..
<sec level="2" id="sec002" sec-type="level-B">
<title xmlns="http://www.w3.org/1999/xhtml">What is Child Protection<named-content content-type="index"
name="default" a-level="child protection" b-level="definition of" c-level="" d-level="" e-level=""
format="" range="" see="" see-also=""></named-content> in Humanitarian Action? </title>
<p specific-use="para">Child protection is the ‘prevention of and response to abuse, neglect, exploitation and
violence against children’.</p>
<p specific-use="para">The objectives of humanitarian action are to:</p>
<list list-type="bullet" specific-use="1" list-content="Lijstalinea">
<list-item>
<p specific-use="para">Save lives, alleviate suffering and maintain human dignity during and after
disasters; and</p>
</list-item>
<list-item>
<p specific-use="para">Strengthen preparedness for any future crises.</p>
</list-item>
</list>
<p specific-use="para">Humanitarian crises<named-content xmlns="http://www.w3.org/1999/xhtml"
content-type="index" name="default" a-level="humanitarian crises" b-level="causes of" c-level=""
d-level="" e-level="" format="" range="" see="" see-also=""></named-content> can be caused by humans,
such as conflict or civil unrest; they can result from disasters, such as floods and earthquakes; or they
can be a combination of both.</p>
<p specific-use="para">Humanitarian crises<named-content xmlns="http://www.w3.org/1999/xhtml"
content-type="index" name="default" a-level="humanitarian crises" b-level="effects on children of"
c-level="" d-level="" e-level="" format="" range="" see="" see-also=""></named-content>
often have long-lasting, devastating effects on children’s lives. The child protection risks children face
include family separation, recruitment into armed forces or groups, physical or sexual abuse, psychosocial
distress or mental disorders, economic exploitation, injury and even death. They depend on factors such as
the:</p>
<list list-type="bullet" specific-use="1" list-content="Lijstalinea">
<list-item>
<p specific-use="para">Nature and scale of the emergency;</p>
</list-item>
<list-item>
<p specific-use="para">Number of children affected;</p>
</list-item>
<list-item>
<p specific-use="para">Sociocultural norms;</p>
</list-item>
<list-item>
<p specific-use="para">Pre-existing child protection risks;</p>
</list-item>
<list-item>
<p specific-use="para">Community-level preparedness; and</p>
</list-item>
<list-item>
<p specific-use="para">Stability and capacity of the State before and during the crisis.</p>
</list-item>
</list>
<p specific-use="para">Child protection actors and interventions seek to prevent and respond to all forms of
abuse, neglect, exploitation and violence. Effective child protection builds on existing capacities and
strengthens preparedness before a crisis occurs. During humanitarian crises, timely interventions support
the physical and emotional health, dignity and well-being of children, families and communities.</p>
<p specific-use="para">Child protection in humanitarian action includes specific activities conducted by local,
national and international child protection actors. It also includes efforts of non-child protection actors
who seek to prevent and address abuse, neglect, exploitation and violence against children in humanitarian
settings, whether through mainstreamed or integrated programming.</p>
<p specific-use="para">Child Protection in Humanitarian Action promotes the well-being and healthy development
of children and saves lives.</p>
</sec>
To display this code in broser i first replaced the <title> tag with <sec-title> and it works fine. Finally at the stage of exporting xml i replaced back <sec-title> with <title>. Here is the stage where the problem occurring...

Vuejs databinding on image source not working

I have the following component where I read data from Indexeddb (ArrayBuffer) and use it as source for an image. When the parent component uses this component, only the last formUpload gets it's dataSource set. My console.log's tells me that the data is there, the URL.createobjecturl is succesfully created, I can open them in devtools and see the images, but they are not assigned as the source of the image. Any ideas?
<div class="ui grid segment" v-if="formData.Uploads.length > 0">
<div class="four wide column" v-for="upload in formData.Uploads" style="position:relative;">
<formUpload :upload="upload"></formUpload>
</div>
</div>
Vue.component("formUpload", {
props: ["upload"],
template: `
<div class="ui fluid image">
<a class="ui green left corner label">
<i class="add icon"></i>
</a>
<a class="ui red right corner label" v-on:click="removeUpload(upload)">
<i class="remove icon"></i>
</a>
<img style="width:100%;" :src="dataSource" />
<div class="ui blue labels" v-if="upload.tags.length > 0" style="margin-top:5px;">
<image-tag v-for="tag in upload.tags" :tagtext="tag" :key="tag" :upload="upload.id" v-on:deletetag="deletetag"></image-tag>
</div>
</div>
`,
data: function () {
return {
dataSource: undefined
}
},
mounted: function () {
_this = this;
imageStore.getItem(_this.upload.imageId).then(function (result) {
console.log("Data gotten", result.data);
var dataView = new DataView(result.data);
var blob = new Blob([dataView], { type: result.type });
console.log("Data transformed", blob);
_this.dataSource = URL.createObjectURL(blob);
console.log("DataUrl", _this.dataSource);
});
},
methods: {
removeUpload: function (upload) {
console.log("removeUpload");
}
}
});

In short, you need a key.
When Vue is updating a list of elements rendered with v-for, it by
default uses an “in-place patch” strategy. If the order of the data
items has changed, instead of moving the DOM elements to match the
order of the items, Vue will simply patch each element in-place and
make sure it reflects what should be rendered at that particular
index. This is similar to the behavior of track-by="$index" in Vue
1.x.
This default mode is efficient, but only suitable when your list render output does not rely on child component state or temporary DOM
state (e.g. form input values).
[...]
It is recommended to provide a key with v-for whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains.
This is a fairly common "gotcha" which should be helped by the fact that
In 2.2.0+, when using v-for with a component, a key is now required.