Apologies if this is straight forward. I am following a tutorial and it seems there is a syntax error. I am unable to find the right format for the following:
const productsToDisplay = this.props.shopData.shop.products
return (
<div classname="App">
<div classname="products-grid">
{productsToDisplay.edges.map((el, i)=> {
return(
<product key="{i}" product="{el.node}">
)
})}
</product>
</div>
</div>
);
}
}
The two divs under the closing product tag are not recognized by the above divs, as the first one states it is unclosed.
I believe this is due to the being in the return statement, and out of it - but I am unclear how this should be formatted.
Reference: http://www.codeshopify.com/blog_posts/building-a-store-with-react-step-2
error: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...?
Any help is appreciated!
There are two issues. The tutorial is importing Product as follows:
import Product from './Product.js';
but then the tutorial references it later as <product when it should be <Product.
The second issue is that the closing Product tag </product> should either be inside the return statement along with the open Product tag or just use a self-closing tag like this:
{productsToDisplay.edges.map((el, i)=> {
return(
<Product key="{i}" product="{el.node}" />
)
})}
So your complete return statement should look like this:
return (
<div classname="App">
<div classname="products-grid">
{productsToDisplay.edges.map((el, i)=> {
return(
<Product key="{i}" product="{el.node}" />
)
})}
</div>
</div>
);
Credits to #RyanCogswell for noticing the other issue with the uppercase P in <products>.
Related
I am making a chrome extension that deletes a section of a website. To do this, I need to find a <span> that contains some text, and then select the containing <div> tag. Often this tag will be many levels above the span in the DOM, and it doesn't have a consistent attribute to select by.
HTML
<body>
<div> <!-- I want to select this DIV -->
<div>
<div>
<div>
<span>some text</span>
</div>
</div>
</div>
</div>
</body>
I have used //span[text() = 'some text' to find the right <span> but now I need to go back up to the first <div> in the example HTML
Have tried //*[ancestor::span[text() = 'some text']] and //span[ancestor::*[text() = 'some text']]. Yes these would only go up to the first parent, but that's not even working for me, even though they come up as valid XPath expressions when I test on XPath Tester.
What is the simplest way of writing an XPath expression that can do this?
You might try with the ../ syntax to go up one level (ie: to the immediate parent ) and chain them like so:
const getnodes=function( expr, parent ){
let results=[];
let contextNode=parent || document;
let query=document.evaluate( expr, contextNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
for ( let i=0, length=query.snapshotLength; i < length; ++i ) {
results.push( query.snapshotItem( i ) );
}
return results;
};
let col=getnodes( '//span[ text()="some text" ]/../../../../../div', document.body );
col.forEach( n=>console.info( n.textContent ) )
<!--This is the div I want to select -->
<div>top
<div>a
<div>b
<div>c
<span>some text</span>
</div>
</div>
</div>
</div>
A better solution I have found is to use ancestor in the XPath query, because I am often wanting to traverse up many levels.
Examples
//span[text() = 'some text']/ancestor::*[4]
selects the fourth element up from the selected span, regardless of what type those elements might be.
//span[text() = 'some text']/ancestor::a[2]
Will find the second anchor tag up from the selected span, provided it is a direct ascendant of the span.
Im new to React. Im trying to convert an array contains links into something that will show the links in order in the website.
something like this:
external_references = ["https://google.com", "https://en.wikipedia.org/wiki/Wiki"]
into something to show up in the server like this:
external_references:
https://google.com(link)
https://en.wikipedia.org/wiki/Wiki(link)
I tried to do the following code I found but it failed to work:
<span className="externalRefs">External_references: <br></br> {external_references.forEach(link => {
return new DOMParser().parseFromString(link, "text/xml");
})}</span>
you can try the map function:
<p>external_references:</p>
{external_references.map(link=>{
return <div key={link}>
<a href={link}>{link}</a>
</div>
}
}
I recomend you as a good practice using the link as a key, since each of them should be different.
just
{external_references.map((reference, i) => {
return(
<div key ={i}>
<a href ={reference}>{reference}</a>
</div>
);
})}
You can use the Array.map function.
<span className="externalRefs">External_references: <br></br>
{
external_references.map(link, i) => {
<div key ={i}>
<a href ={link}>{link}</a>
</div>
}
}
</span>
I have to render html object Array in React JS
Can anyone guide me how to use renderHTML function.
output of the object is something like this:
"
const items = this.state.Data.map(item => (
<div key={item._id}>{renderHTML("{item.albComEn}")}</div>
another variation i tried
const items = this.state.Data.map(item => (
<div key={item._id}>{renderHTML("item.albComEn")}</div>
));
output i get => "item.albComEn"
or
{item.albComEn}
You can try with template strings. More info
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
const items = this.state.Data.map(item => (
<div key={item._id}>{renderHTML(`${item.albComEn}`)}</div>
You can also use short syntax of React Fragments i.e. '<> </>'. Use these to bracket to write the html code. When rendered the html code will successfully compiled.
Example:
const service = [
{
htmlCode: <>
<div>
<h2>Application Screening</h2>
<br />
<br />
What you can expect from us:<br />
- Your resume will be written by a team of seasoned experts<br />
- They will make sure that your Resume presents your strong points,
achievements & key skills in a recruiter-friendly format.<br />
</div>
</>
},
]
Use inside render method as
...
render(
<div>
{service[0].htmlCode}
<div>
)
}
While following a tutorial video, I encountered an issue with the rows and columns classes in bootstrap.
The instructor in the video made a div with a row class and al the items seemed to work perfectly. When trying to duplicate the same things, all my items just stack on top of each other in a single column rather than multiple. Even when the browser is at full screen.
Here is the link to the video (https://www.youtube.com/watch?v=-edmQKcOW8s&t=19375s) # 1:51:52 is where the problem occurs
Any help would be greatly appreciated
export default class ProductList extends Component {
render() {
return (
<React.Fragment>
<div className="py-5">
<div className="container">
<Title name="our" title="products" />
<div classname="row">
<ProductConsumer>
{value => {
return value.products.map(product => {
return <Product key={product.id} product=
{product} />
})
}}
</ProductConsumer>
</div>
</div>
</div>
</React.Fragment>
)
}
}
Expected result would be that on a full screen browser items would be listed in 4 columns.
<div classname="row">
You have a typo here. It should be className.
Secondly, there is no col class in your code. Try adding this:
return(
<div className="col-3">
<Product key={product.id} product={product} />
</div>
)
I have a const defined with multiple functions that are irrevelant to the question, so am just including a sanitized segment that's relevant. Let me know if I should include anything more.
return (
<React.Fragment key={index}>
<hr className={hrClasses} />
<span className={spanClasses}>
{isTrue ? 'x' : index + 1}
</span>
</React.Fragment>
);
})}
</div>
);
In the browser, I see the warning:
Warning: Each child in a list should have a unique "key" prop.
Since the hr element doesn't need a unique key prop, how can I get around this error?
I've tried different variations of keys, such as adding key={index} to the hr element and re-labelling the index key as id for the span. I'm not sure what else to try. Any guidance would be much appreciated!
You are not applying the key to the parent Fragment.
You can use <> the same way you’d use any other element except that it doesn’t support keys or attributes. ~ https://reactjs.org/docs/fragments.html#short-syntax
You are using the short syntax of <> which does not support keys. Use:
<React.Fragment key={index}>
<hr className={styles.hr} />
<span className={styles.span}>
{isValidated ? 'x' : index + 1}
</span>
<React.Fragment/>