image does not render but show thumbnail
title works*
what did i do wrong?
image.ts
export const images = [
{ id: '1', img: 'src/assets/shared/images/a.png', title: 'Images' },
{ id: '2', img: 'src/assets/shared/images/b.png', title: 'Images' },
{ id: '3', img: 'src/assets/shared/images/c.png', title: 'Images' },
];
display.tsx
interface Images {
id: string;
img: string;
title: string;
}
.....<>
{images.map(({ id, img, title }: Images) => (
<img src={String(img)} key={id} alt="img" />
))}
</>
.....
Related
I am trying to render product images from and array but they are not being displayed in my browser. There is no error message nor warning. Reactjs app is compyling with no errors.
This is my file with the data:
const sunglasses_card = [
{
id: Math.random(),
product_name: ' Hydra',
price: '173',
currency: '$',
thumb: './images/test.png'
},
{
id: Math.random(),
product_name: 'Oakley Kato',
price: '298',
currency: '$',
thumb: './images/oakley_kato.png'
},
{
id: Math.random(),
product_name: 'Sutro Lite Sweep',
price: '184',
currency: '$',
thumb: './images/sutro_lite.png'
},
{
id: Math.random(),
product_name: 'Encoder',
price: '255',
currency: '$',
thumb: './images/encoder.png'
}
]
export default sunglasses_card;
And this is my dummy component:
import './App.css';
import sunglasses_card from '../src/data/product_data'
function App() {
const sunglases = sunglasses_card
return (
<div className="App">
{sunglases.map((sunglass) => {
return (
<div key={sunglass.id}>
<h1>This is a product</h1>
<p>{sunglass.price}</p>
<img src={sunglass.thumb} alt="anteojos" />
</div>)
})}
</div>
);
}
Price of each product is being rendered perfectly fine. Any reason why am i not being able to display the image?
I have a group of sets, I want to show an image from each set on my webpage which users can use as a link to their respective galleries. So I want to fetch an item (an image) from an array of images. I don't have a specific image picked for each category, so I would just be getting the first image within its array of images to use. I am getting this error: description: "expected '}' following object body"
import React, { useState, useEffect } from 'react';
import { client, urlFor } from '../lib/client';
import { Header, Footer } from '../components';
import Link from 'next/link';
const gallery = () => {
const [ galleryData, setGalleryData ] = useState(null);
useEffect(() => {
client.fetch(
`*[_type == 'set']{
set_name,
set_images[]->{
image{->asset{
_id,
url
}}
}
}`
).then((data) => setGalleryData(data))
.catch(err => console.error(err))
})
return (
<div>
<Header />
<main className="main-gallery">
<div className="title">
<div className="title-line-left"></div>
<h2>gallery</h2>
<div className="title-line-right"></div>
</div>
<div className="categories">
<ul className="categories-container">
{galleryData && galleryData.map((set, index) => (
<li key={index}>
<Link href="/sets"><img src={urlFor(set.set_images.image[0]).auto('format').url()} alt={set.set_name}/></Link>
</li>
))}
</ul>
</div>
</main>
<Footer />
</div>
)
}
This is my sanity schema:
export default {
name: 'set',
type: 'document',
title: 'Set',
fields: [
{
name: 'set_name',
type: 'string',
title: 'Set Name',
},
{
name: 'set_images',
type: 'array',
title: 'Set Images',
of: [
{
name: 'image',
type: 'image',
title: 'Image',
options: {
hotspot: true,
},
fields: [
{
name: 'alt',
type: 'string',
title: 'Alternative Text',
options: {
isHighlighted: true
}
},
{
name: 'name',
type: 'string',
title: 'Name',
options: {
isHighlighted: true
}
},
{
name: 'date',
type: 'string',
title: 'Date',
options: {
isHighlighted: true
}
},
{
name: 'size',
type: 'string',
title: 'Size',
options: {
isHighlighted: true
}
},
{
name: 'materials',
type: 'string',
title: 'Materials',
options: {
isHighlighted: true
}
},
]
},
]
},
{
name: 'slug',
title: 'Slug',
type: 'slug',
options: {
source: 'set_name'
}
}
]
}
This fixed it:
useEffect(() => {
client.fetch(
`*[_type == 'set']{
set_name,
'setSelect' : set_images[0].asset->{_id,url}}`
).then((data) => setGalleryData(data))
.catch(err => console.error(err))
})
and then {set.setSelect}
I want to change border or outline color when I click for one item not all list items
but when I click on any items all list changed
I'm trying to change one item color not all...so when I change state it changed for all not for item I clicked
const [color,setColor]=useState('');
type Values = {
id: number;
title: string;
image: string;
color:string;
};
const myList2:Array<Values> =[
{
id: 1,
title: 'Suitcase',
image: suitcase,
color:'blue',
},
{
id: 2,
title: 'Briefcase',
image: briefcase,
color:'aqua',
},{
id: 3,
title: 'Handbage',
image: handbage,
color:'red',
},
{
id: 4,
title: 'Multy',
image: multy,
color:'green',
},
{
id: 5,
title: 'Backpack',
image: backpack,
color:'gray',
},
{
id: 6,
title: 'Family',
image: family,
color:'orange',
},
]
const listImage=myList2.map((item,i) => {
return <span key={i}>
<img key={item.id} style={{borderColor:color}} onClick={()=>setColor(item.color)} src={item.image} alt={item.title} />
</span>
})
Currently you are setting only color name in the state variable but not specify that for which index this color will apply
So simply store only index to the state variable on which user click by adding onClick={()=>setActive(i)} in the image tag
and finally check the condition in style by adding style={{borderColor: active == i ? item.color : 'transparent', borderWidth: 3}} in the image tag
const [active,setActive]=useState(-1);
type Values = {
id: number;
title: string;
image: string;
color:string;
};
const myList2:Array<Values> =[
{
id: 1,
title: 'Suitcase',
image: suitcase,
color:'blue',
},
{
id: 2,
title: 'Briefcase',
image: briefcase,
color:'aqua',
},{
id: 3,
title: 'Handbage',
image: handbage,
color:'red',
},
{
id: 4,
title: 'Multy',
image: multy,
color:'green',
},
{
id: 5,
title: 'Backpack',
image: backpack,
color:'gray',
},
{
id: 6,
title: 'Family',
image: family,
color:'orange',
},
]
const listImage=myList2.map((item,i) => {
return <span key={i}>
<img key={item.id} style={{borderColor: active == i ? item.color : 'transparent', borderWidth: 3}} onClick={()=>setActive(i)} src={item.image} alt={item.title} />
</span>
})
You can use the id for that. So instead of only the color name, keep two pieces of information as an object inside the state variable => id, color.
Like this:
const [selectedList, setSelectedList] = useState({});
const listImage=myList2.map((item,i) => {
return <span key={i}>
<img key={item.id}
style={item.id === selectedList.id ? { borderColor: selectedList.color } : {}}
onClick={() => setSelectedList({id: item.id, color: item.color})}
src={item.image} alt={item.title} />
</span>
})
I have a list of products in a json with their props, and I want to take that props of that specific item by his ID to a different file. How can I do that if the route isn't dynamic? (Normally i would take the router.query.id).
This is the json example:
export const ArtroscopiaPlus = [
{
title: 'product 1',
url: 'https://drive.example1',
id: 'grapa-iql',
img: '/img/productos/Artroscopia/img1.jpg'
},
{
title: 'Product 2',
url: 'https://drive.example2',
id: 'kurosaca-romo',
img: '/img/productos/Artroscopia/img3.jpg'
},
{
title: 'Product 3',
url: 'https://drive.example3',
id: 'tornillo-transversal',
img: '/img/productos/Artroscopia/img4.jpg'
},
And this is the code where I can inject that props:
const GrapaIQL = () => {
return (
<>
<ItemS>
<TitleItem className="title-item">{Prop with the title}</TitleItem>
<ContentItem>
<ImageDiv className="image-div">
<ItemImg src="{prop with the img}" alt={`${titulo} Company`} className="item-img" data-aos="fade-right" />
</ImageDiv>
<div className="info-div">
<table class="tabla-chica" data-aos="fade-left">
(not relevant table content)
</table>
</div>
<Pdf path='{Prop with the path}' />
</ContentItem>
<ScrollArrow />
</ItemS>
I have a table using react-table but for one of the columns I want to show two pieces of data - name and description.
getInitialState(){
return {
data: [{
id: 1,
keyword: 'Example Keyword',
product: [
name: 'Red Shoe',
description: 'This is a red shoe.'
]
},{
id: 2,
keyword: 'Second Example Keyword',
product: [
name: 'blue shirt',
description: 'This is a blue shirt.'
]
}]
}
},
render(){
const { data } = this.state;
return (
<div className="app-body">
<ReactTable
data={data}
columns={[{
columns: [{
Header: 'Id',
accessor: id,
show: false
}, {
Header: 'Keyword',
accessor: 'keyword'
}, {
Header: 'Product',
accessor: 'product' // <<< here
}]
}]}
defaultPageSize={10}
className="-highlight"
/>
</div>
)
}
Where the accessor is Product I want to show both the name and description (I'll style them to stack with different font sizes) in the Product column.
I've tried using the Cell: row => attribute for that column and thought I could also try calling a function that lays it out, but I've gotten errors both times.
Any ideas how to do this?
Indeed you should use Cell for this like this:
getInitialState(){
return {
data: [
{
id: 1,
keyword: 'Example Keyword',
product: [
name: 'Red Shoe',
description: 'This is a red shoe.'
]
},{
id: 2,
keyword: 'Second Example Keyword',
product: [
name: 'blue shirt',
description: 'This is a blue shirt.'
]
}]
}
},
render(){
const { data } = this.state;
return (
<div className="app-body">
<ReactTable
data={data}
columns={[{
columns: [{
Header: 'Id',
accessor: id,
show: false
}, {
Header: 'Keyword',
accessor: 'keyword'
}, {
Header: 'Product',
accessor: 'product',
Cell: ({row}) => { //spread the props
return (
<div>
<span className="class-for-name">{row.product.name}</span>
<span className="class-for-description">{row.product.description}</span>
</div>
)
}
}]
}]}
defaultPageSize={10}
className="-highlight"
/>
</div>
)
}
Another thing I spotted was that product property should be an object not an array, so change this:
product: [
name: 'blue shirt',
description: 'This is a blue shirt.'
]
to this:
product: {
name: 'blue shirt',
description: 'This is a blue shirt.'
}
The accepted answer didn't work for me. Here's how I did it:
const [data, setData] = React.useState([
{
name: 'My item',
desc: 'This is a nice item',
},
]);
const columns = React.useMemo(() => [
{
Header: 'Name',
accessor: 'name',
Cell: (props) => (
<>
<p className="item title">{props.row.original.name}</p>
<p className="item desc">{props.row.original.desc}</p>
</>
),
},
]);