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>
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?
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" />
))}
</>
.....
I use react-bootstrap-table-next. And want to use a toggle button which hide or show rows with a certain value. But the problem is that the table content doesn't change.
import BootstrapTable from 'react-bootstrap-table-next';
const products = [
{id: 0, name: 'item 0', price: 4},
{id: 1, name: 'item 1', price: 5},
{id: 2, name: 'item 2', price: 3},
{id: 3, name: 'item 3', price: 5},
]
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name',
}, {
dataField: 'price',
text: 'Product Price',
}];
const handleClick = () => {
for (i=0; i> products.length; i++) {
if (products[i]["price"] === 5) {
products.slice(i, 1);
}
}
};
export default () => (
<div>
<button className="btn btn-lg btn-primary" onClick={ handleClick }>hide data </button>
<BootstrapTable keyField='id' data={ products } columns={ columns } />
</div>
);
The problem is that you are trying to update products, but on every re-render, it will reset to its initial value (Because it's defined outside the component's function). So, the value of products will always be the same.
One solution is to move products inside the component and create a state for it.
You can reshape your code like this:
import BootstrapTable from 'react-bootstrap-table-next';
import { useState } from 'react';
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name',
}, {
dataField: 'price',
text: 'Product Price',
}];
const MyComponent = () => {
const [products, setProducts] = useState([
{ id: 0, name: 'item 0', price: 4 },
{ id: 1, name: 'item 1', price: 5 },
{ id: 2, name: 'item 2', price: 3 },
{ id: 3, name: 'item 3', price: 5 },
]);
const handleClick = () => {
let temp = products;
for (i = 0; i > temp.length; i++) {
if (temp[i]["price"] === 5) {
temp.slice(i, 1);
}
};
setProducts(temp);
};
return (
< div >
<button className="btn btn-lg btn-primary" onClick={handleClick}>hide data </button>
<BootstrapTable keyField='id' data={products} columns={columns} />
</div >
)
};
export default MyComponent;
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>
</>
),
},
]);
I have defined some sample data (collection) and trying to iterate through but getting Failed to Compile and it's pointing to render() { in this component:
class RecipeList extends Component {
constructor(props) {
super(props);
this.state = {
recipes: {
"1": {
id: 1,
url: 'http://via.placeholder.com/300x300',
title: '1st Title',
description: 'some decription 1'
},
"1": {
id: 2,
url: 'http://via.placeholder.com/300x300',
title: '1st Title',
description: 'some decription 1'
},
"1": {
id: 3,
url: 'http://via.placeholder.com/300x300',
title: '1st Title',
description: 'some decription 1'
}
}
}
render() {
const recipeIds = Object.keys(this.state.recipes);
const Items = recipeIds.map((recipe) => {
return (
<RecipeListItem
key={recipe}
recipe={recipe}
/>
);
});
return (
<div>
{Items}
</div>
);
}
}
You need unique keys for your recipes. Try the following
class RecipeList extends Component {
constructor(props) {
super(props);
this.state = {
recipes: {
"1": {
id: 1,
url: 'http://via.placeholder.com/300x300',
title: '1st Title',
description: 'some decription 1'
},
"2": {
id: 2,
url: 'http://via.placeholder.com/300x300',
title: '1st Title',
description: 'some decription 1'
},
"3": {
id: 3,
url: 'http://via.placeholder.com/300x300',
title: '1st Title',
description: 'some decription 1'
}
}
}
}
render() {
const recipeIds = Object.keys(this.state.recipes);
const Items = recipeIds.map((key) => {
return (
<div
key={key}>
{this.state.recipes[key].id}
</div>
);
});
return (
<div>
{Items}
</div>
);
}
}
Edit: Updated the code to provide the whole class.