I tried to map function yet throw error (Warning: Each child in a list should have a unique "key" prop.) - redux

Warning: Each child[enter image description here][1] in a list should have a unique "key" prop.
https://i.stack.imgur.com/vAfvR.png
please help me regarding this error

Your key has to be on the outermost element, which in this case is <>.
So rewrite <> to <React.Fragment> and then add a key prop.
<React.Fragment key={id.id}>
...
</React.Fragment>
And please share source code, not screenshots in future questions.

Related

How to Fix 'Each child should have a unique key prop?

Hi everyone I would like to display for each element all of its sub-documents.
<div><ul>{designModdulles.map((designModdulle)=><li key={designModdulle.epreuves.nature_epreuve}>{designModdulle.epreuves.nature_epreuve}</li>) }</ul></div>
```
I wanted the sub documents to be displayed` in a map
but i had: Warning: Each child in a list should have a unique "key" prop.
Assuming this is JavaScript, the cause of the issue is that there are duplicate key values. You can use the index of each map entry to create a new key
<div><ul>{designModdulles.map((designModdulle, index)=><li key={designModdulle.epreuves.nature_epreuve + index}>{designModdulle.epreuves.nature_epreuve}</li>) }</ul></div>
You may want to look at the following to see what your choices are (there are other resources as well): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
the problem of the key is resolved, but nothing is displayed in the tag
hello everyone here is the solution:
<ul><li>{designModdulles.map((item,index)=>(<div key={index}>{item.epreuves.map((c, i)=>(<div key={i}>
<h3>{c.code_epreuve}</h3><Button>Insérer notes</Button><Button>Supprimer</Button> </div>) )}</div>))}</li></ul>
thank you

Flow type for an array of HTML elements?

I'm converting some working JavaScript code to Flow. I have a variable IMAGES which is created but not immediately assigned any value. Later on it becomes an array of HTML elements.
Why is this code wrong?
let IMAGES Array<HTMLElement>;
// Later on within an init function:
IMAGES = Array.from(document.querySelectorAll(`.${someImagesClass}`));
The Flow error I get is:
Parsing error: Unexpected token, expected ";"
All I was missing was the :
let IMAGES: Array<HTMLElement>;
There is no generic-syntax and no need to "publish" a variable in JavaScript! Just merge both:
// Later on within an init function:
let IMAGES = Array.from(document.querySelectorAll(`.${someImagesClass}`));

"v.context.$implicit.categories[0] is undefined" error in Ionic 3

I am trying to access the category slug for a product in ionic using the WordPress rest API. This seems to work fine on one page as <h3 class="product-name uppercase">{{productdetail?.categories[0].slug}}</h3> however this does not seems to work when i try implementing the same using for loop in angular on another page
<div class="width50" *ngFor="let object of dataList">
<img src="{{object.images[0].src}}" width="150" (click)="navigateToPage(object.id)" />
<h3 class="product-name uppercase" text-nowrap>{{object?.categories[0].slug}}</h3>
</div>
it gives an error as v.context.$implicit.categories[0] is undefined however on same page the code for image source seems to work fine.
According to the docs
The Angular safe navigation operator (?.) is a fluent and convenient
way to guard against null and undefined values in property paths. Here
it is, protecting against a view render failure if the currentHero is
null.
This way if write
obj?.foo
angular will transform it to the following expression.
obj == null ? null : obj.foo
so if the obj is empty value then you won't see any of errors.
In your case you can use the expresion
object?.categories[0]?.slug
that will be transformed to
object == null ? null : object.categories[0] == null ? null : object.categories[0].slug;
Safe navigation operator is helpful if you don't know whether your object contains any value or not, or you load data asynchronously and your object is undefined at first time.

Get Element Attribute in robot framework

hi how to use Get Element Attribute in Robot framework? in instruction I have
Return value of element attribute.
attribute_locator consists of element locator followed by an # sign and attribute name, for example element_id#class.
I have this xpath=${check_radio_xpath}#class is this right way?
where ${check_radio_xpath} = md-radio-11
I get this error:
${ischecked} = Selenium2Library . Get Element Attribute xpath=${check_radio_xpath}#class
Documentation:
Return value of element attribute.
TRACE Arguments: [ 'xpath=md-radio-11#class' ]
DEBUG Finished Request
FAIL ValueError: Element 'xpath=md-radio-11' not found.
I think you're pretty close. Please try to format your question better, I took a quick shot because your question is difficult to read. The result will be more and better help from the community
${RADIO_XPATH} //*[#id="${check_radio_xpath}"]
${CLASS}= Selenium2Library.Get Element Attribute ${check_radio_xpath}#class
sample for this <div><label for="foo"></label></div>
${for_value}= Get Element Attribute xpath=//div/label for
Log To Console ${for_value}
console result is:
foo
This snippet works for me :
Get Line Numbers And Verify
${line_number1}= Get Element Attribute //*[#id="file-keywords-txt-L1"] data-line-number
Log To Console ${line_number1}
${line_number2}= Get Element Attribute //*[#id="file-keywords-txt-L2"] data-line-number
Log To Console ${line_number2}
Verify in order of ${line_number1} and ${line_number2} is true
What was important is that the spaces/tabs between the keywords are correct, otherwise it does not get recognised as a so called keyword.
Thanks a lot, i wanted to check meta noindex content in page source.
i used this.
${content} Get Element Attribute xpath=//meta[#name="robots"]#content
should be equal as strings ${content} noindex,follow
You can use both XPath and CSS selector if you have selenium library
${title}= Get Element Attribute ${xpath} attribute=title

When using StoreValue, Selenium claims "This element has no value"

I have the following code, where I need to get the value:
<a href="/checkout/cart.jsf">
Items:
<span class="numberofitems">1</span>
</a>
However, when I attempt to point at it using css=span [class='numberofitems'], I get the message "The element has no value; is it really a form field?" The element does have a value which I can see in Firebug, but I can't figure out how to properly store this value.
Here we go.. every WebElements given below will give better outcome to get the value '1'.
By.xpath("//a[#href='/checkout/cart.jsf']/span")
By.xpath("//a[text()='Items: ']/span"))
By.xpath("//span[#class='numberofitems']")
If they are not working,
Check whether the Elements are HIDDEN with help of Firebug.
Check whether the classname, 'numberofitems' is repeated.

Resources