console.log(data.allShopifyProductVariant.nodes[0].product.title)
return (
<div>
<div>
{data.allShopifyProductVariant.nodes.map(node => {
<div>
{node.product.title}
</div>
})}
</div>
</div>
)
}
export const query = graphql`
query CollectionQuery {
allShopifyProductVariant(filter: {product: {productType: {in: "20 lb. Plotter Paper"}}}) {
nodes {
compareAtPrice
sku
price
product {
title
images {
gatsbyImageData(width: 150)
}
productType
}
}
}
}`
export default Collection;
Expecting this function to return the product title, for some reason it returns nothing. I've tried using dangerously set innerhtml but nothing comes up, no error. I am able to console.log the {node.product.title} and it returns exactly what I want to display but for some reason it is not rendering to the div. Any help is appreciated, thanks in advance :D
You are missing the return statement:
return (
<div>
<div>
{data.allShopifyProductVariant.nodes.map(node => {
return <div>
{node.product.title}
</div>
})}
</div>
</div>
)
Or using the implicit return:
return (
<div>
<div>
{data.allShopifyProductVariant.nodes.map(node => (
<div>
{node.product.title}
</div>
))}
</div>
</div>
)
Related
Why i got this error? I wanna create menu for mobile devises, but i do not have enough experience for this, so i decided to try to do something like this:
function Header() {
const [menuIsClicked, setmenuIsClicked] = useState(false)
const auth = useContext(AuthContext)
const clickMenuHandler = (menuIsClicked) => {
if (menuIsClicked) {
return setmenuIsClicked(false)
}
return setmenuIsClicked(true)
}
return (
<>
<header className="hd-home">
<MenuForMobiles menuIsClicked={menuIsClicked} clickMenuHandler={clickMenuHandler} />
<div className="nav-link1">
Home
About
Donate
</div>
<div className="nav-link2">
Profile
<a className="nv-btn"
href=""
>Exit</a>
</div>
</header>
<a href="">
<WeeklyNews />
</a>
</>
)
}
function MenuForMobiles(menuIsClicked, clickMenuHandler) {
if (menuIsClicked) {
return (
<div className="m-o"
style={{
backgroundColor: 'pink',
width: '100vw !important',
height: '100vh !important',
}}>
<i onClick={() => clickMenuHandler}>
<FontAwesomeIcon icon={faListUl} />
</i>
</div >
)
}
return (
<div className="m-o">
<FontAwesomeIcon icon={faListUl} />
</div>
)
}
I think that a problem is on my clickMenuHandler function.
Thx for any advices and help. By the way, as you can see, i am new on react :)
First of all, this error can be caused by plugins in your browser. In my case it was google translator. I just removed it cuz i don't use it, but will be better if you'll try to ignore/catch this error.
Second, you can use source code like this to make things like DropDownButton
https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/
i
I don't succeed to fix the bug
I need that in tablle show buttom
I copy the code from fluent UI https://developer.microsoft.com/de-de/fluentui#/controls/web/detailslist/customitemcolumns
enter image description here
but this in give bug in onrenderItem because the declared columns
enter image description here
i try this but have bug
enter image description here
i sucsses to fix the bug
return (
<div>
<div>
<div className="ms-Grid">
<div className="ms-Grid-row">
<DetailsList
items={item}
columns={columns}
setKey='set'
onRenderItemColumn={renderItemColumn}
/>
</div>
</div>
</div>
</div>
);
const renderItemColumn = (item: any, index: any, column: any) => {
let fieldContent = item[column.fieldName];
switch (column.key) {
case 'custem':
return <Link href="https://developer.microsoft.com/en-us/fluentui#/controls/web/link" >ukbkkbio</Link></span>
default:
return <span >{fieldContent}</span>;
}
}
https://codesandbox.io/s/rough-cache-vgl3p?file=/src/App.tsx
I am new to reactJS. I have a JSON file which looks like this:
I want to extract data and display each post with its comments, user who commented and created time and display it with JSX using the map function.
So I declared an empty array called items in my state and put all these data into it and tried to browse it but I got this error:
×
TypeError: Cannot read property 'data' of undefined
this is my code:
render() {
return (
<div>
<h1>Hello World !!!! </h1>
<ul>
{ this.state.items.comments.data.map(item => <li key={item.id}>{item.data[item].from.name}</li>)}
</ul>
</div>
)
}
Nice to meet you.
I can solve it.
Please do like below.
render() {
return (
<div>
<h1>Hello World !!!! </h1>
<ul>
{ this.state.items.comments.data.map(item => <li key={item.id}>{item.from.name}</li>)}
</ul>
</div>
)
Please reply with your opinion.
Best regards.
in your json file look like you get array of array
try with this hope this will work
this.state.items.map((item,index)=>{
this.state.items[item].comments.data.map(element=>
<li key={item.id}>{item.from.name}</li>)
})
})
I figured out that I have to use map inside another map because I have an array in another array and this code solved the problem:
render{
return (
<div>
{
this.state.items.map((item) => {
return (
<div>
<h4>{item.id}</h4>
<ul>
{
item.comments.data.map((data) => {
return (
<li>
{data.message} : {data.created_time} : {{data.from.name}
</li>
);
})
}
</ul>
</div>
);
})
}
</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 am trying to wrap html around inner div only when some condition is met. But when I run the script, it says Module build failed: SyntaxError Unexpected token. I tried to use conditional rendering.
return (
<Fragment>
<div>
{
(true) ? <div class="imghvr-wrapper"> : ''
}
<div class="imghvr">
<div class="imghvr-overlay imghvr-anim-none imghvr-anim-single">
</div>
{
(true) ? </div> : ''
}
</div>
</Fragment>
);
Like this:
const myComponent = () => {
const myCondition = true;
const child = (
<div className="imghvr">
<div className="imghvr-overlay imghvr-anim-none imghvr-anim-single" />
</div>
);
return (
myCondition ? <div className="imghvr-wrapper">{ child }</div> : child
);
};
You can't split tags like this: myCondition ? <div className="imghvr-wrapper"> : null you should always close your tags. For example that code is valid: (true) ? <div className="imghvr-wrapper"/> : '' because tag is closed