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?
Related
This is my Cart.jsx
import { createContext, useEffect } from "react"
import Cake from "../About Section/Cake";
const PdtList = createContext();
export default function Cart() {
let list = [
{
id: "52",
name: "Doll cake"
// images: image80
},
{
id: "53",
name: "Mixed Platte cake"
// images: image81
},
{
id: "54",
name: "Pinata cake"
// images: image82
},
{
id: "55",
name: "Bomb cake"
// images: image83
}
];
return (
<>
<main className="align" >
<h1>Thanks for shopping with us</h1>
<PdtList.Provider value={list}>
<Cake />
</PdtList.Provider>
</main>
</>
)
}
export { PdtList };
This is the Cake.jsx
import { PdtList } from "../Cart/Cart";
import { useContext, useState, useEffect } from "react";
export default function Cake(props) {
const { name, images, bold, cut } = props;
const list = useContext(PdtList);
console.log(list);
console.log(typeof(list));
const Add_Products = (index) => {
console.log('Add_Products called');
let tobeAdded = { name, images, bold };
};
return (
<>
<main className="align unique">
<img src={images} alt="" />
<h1>{name}</h1>
<div className="align2">
<small>Rs {bold}</small>
<small style={{ margin: "0px 10px" }}></small>
<small
style={{ "fontSize": "15px", textDecoration: "line-through" }}
>
Rs {cut}
</small>
</div>
<button onClick={Add_Products} style={{ margin: "10px 0px" }}>
Click here
</button>
</main>
</>
);
}
This is the console,
When I am trying to console the list in the Add_Products function in the Cake.jsx then I am getting undefined.
This is a working codesandbox Link
This is the Birthday.jsx
import image60 from './assets/cake60.jpeg'
import image61 from './assets/cake61.jpeg'
import image62 from './assets/cake62.jpeg'
import image63 from './assets/cake63.jpeg'
import image64 from './assets/cake64.jpeg'
import image65 from './assets/cake65.jpeg'
import image66 from './assets/cake66.jpeg'
import image67 from './assets/cake67.jpeg'
import image68 from './assets/cake68.jpeg'
import image69 from './assets/cake69.jpeg'
import Cake from './Cake'
import { useContext } from "react"
import { PdtList } from "../Cart/Cart"
const pdtArray = [{
id: '32',
name: "Anniversary cake",
images: image60
},
{
id: '33',
name: "Anniversary cake",
images: image61
},
{
id: '134',
name: "Anniversary cake",
images: image62
},
{
id: '34',
name: "Anniversary cake",
images: image63
},
{
id: '35',
name: "Anniversary cake",
images: image64
},
{
id: '36',
name: "Anniversary cake",
images: image65
},
{
id: '37',
name: "Anniversary cake",
images: image66
},
{
id: '38',
name: "Anniversary cake",
images: image67
},
{
id: '39',
name: "Anniversary cake",
images: image68
},
{
id: '40',
name: "Anniversary cake",
images: image69
},]
export default function Birthday(props) {
const list = useContext(PdtList);
console.log(list);
const { title } = props;
return (
<>
<main className='PDT_heading align' >
<h1>{title}</h1>
<div className="grid_system">
{
pdtArray.map((e) => {
const { name, images, id } = e;
return (
<Cake key={id} name={name} images={images} cut="232" bold="343" />
)
})
}
</div>
</main>
</>
)
}
When you are going to use the useContext in a component, make sure that component is wrapped inside the Context.Provider (either the component or the parent of the component). Only then the useContext can able to access the values of the context else it will return the default value which is undefined.
So, the root component will be something lie:
<StrictMode>
<PdtList.Provider value={list}>
<Cart />
<Birthday />
</PdtList.Provider>
</StrictMode>
I wrapped the components inside the Provider so all the components inside can able to access the value.
working link: link
I am trying to create FAQ page in my react project using below package:
https://www.npmjs.com/package/react-faq-component
I am able to show FAQ with 1 category.
I want to show questions/answers with different categories:
Code:
import React, { useState } from 'react';
import FaqData from 'react-faq-component';
function Faq() {
const [rows, setRowsOption] = useState(null);
const data = {
title: 'FAQ (how it works)',
rows: [
{
title: 'How do I change my password?',
content: `Answer here.`,
},
{
title: 'How do I sign up?',
content:'Answer here.',
},
],
};
return (
<div>
<h2 className="section-title">My FAQ's</h2>
<div className="faq-style-wrapper">
<FaqData data={data} getRowOptions={setRowsOption} />
</div>
</div>
);
}
If any other demo/library can give me desired output, please suggest those as well.
As suggested by #Arkellys I have used one component per category & its worked for me. Thanks again #Arkellys.
I am adding answer below for more details:
import React, { useState } from 'react';
import FaqData from 'react-faq-component';
function Faq() {
const [rows, setRowsOption] = useState(null);
const data1 = {
title: 'FAQ (how it works)',
rows: [
{
title: 'How do I change my password?',
content: `Answer here.`,
},
{
title: 'How do I sign up?',
content:'Answer here.',
},
],
};
const data2 = {
title: 'FAQ (how it works)',
rows: [
{
title: 'How do I change my password?',
content: `Answer here.`,
},
{
title: 'How do I sign up?',
content:'Answer here.',
},
],
};
const data3 = {
title: 'FAQ (how it works)',
rows: [
{
title: 'How do I change my password?',
content: `Answer here.`,
},
{
title: 'How do I sign up?',
content:'Answer here.',
},
],
};
return (
<div>
<h2 className="section-title">My FAQ's</h2>
<div className="faq-style-wrapper">
<FaqData data={data1} getRowOptions={setRowsOption} />
<FaqData data={data2} getRowOptions={setRowsOption} />
<FaqData data={data3} getRowOptions={setRowsOption} />
</div>
</div>
);
}
I'm am trying to map over seeded data, and I'm getting this error. Does anyone know why? Right now I am only trying to get the key of name to display, but I'm getting an expected an assignment or functionn error.
import { Link } from "react-router-dom";
import {getData} from "../Data"
export default function Home() {
let data = getData();
return (
<div>
{data.map((data) => {
{data.name}
})}
</div>
)
}
This is my seed data that I am trying to pull from.
I have imported it in my home.jsx file and called the function before my return statement.
let data = [
{
name: 'forgive-me-pleases',
image: 'https://i.imgur.com/0UCzcZM.jpg',
price: 50,
tags: ['pink', 'roses', 'bouquet', 'apologies'],
},
{
name: 'pink perfection',
image: 'https://i.imgur.com/XoEClf7.png',
price: 15,
tags: ['pink', 'gerbera daisy', 'singular', 'decor'],
},
{
name: 'hopeful sunshine',
image: 'https://i.imgur.com/LRrcBtN.png',
price: 30,
tags: ['yellow', 'sunflower', 'multiple', 'garden'],
},
{
name: 'motivational mug',
image: 'https://i.imgur.com/NOJ2ikN.png',
price: 25,
tags: ['yellow', 'gerbera daisy', 'singular (with mug)'],
},
{
name: 'breathtaking bouquet',
image: 'https://i.imgur.com/TuuKiHt.png',
price: 40,
tags: ['white', "baby's breath", 'bouquet', 'decor'],
},
{
name: 'loves-me-loves-me-knots',
image: 'https://i.imgur.com/SaTbTEx.png',
price: 20,
tags: ['mixed', 'gerbera daisy', 'mini bouguet', 'for fun'],
},
{
name: 'hiya, spring',
image: 'https://i.imgur.com/dJvHolr.jpg',
price: 35,
tags: ['mixed', 'hyacinths', 'bouquet', 'garden'],
},
{
name: 'can of compassion',
image: 'https://i.imgur.com/PN3jmrf.png',
price: 55,
tags: ['mixed', 'decor', 'bouquet (with can)', 'love'],
},
{
name: 'basket of beauty',
image: 'https://i.imgur.com/Z86X3qq.png',
price: 50,
tags: ['mixed', 'bouquet (with basket)', 'love', 'decor'],
},
];
export function getData() {
return data
}
Please change your code like below
let data = getData();
return (
<div>
{data.map((data) => {
<div>{data.name}</div>
})}
</div>
)
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 studied react + typescript.
i want to set component function prop type.
but i don't know how to set.
this is code.
interface MovieProps {
id: number;
title: string;
year: number;
}
function App() {
...
const movies: MovieProps[] = [
{ id:1, title: 'movie1', year: 2018 },
{ id:2, title: 'movie2', year: 2019 },
{ id:3, title: 'movie3', year: 2020 },
{ id:4, title: 'movie4', year: 2021 },
];
const renderMovies: JSX.Element[] = movies.map(movie => {
return (
<MovieCard key={ movie['id'] } movie={ movie } />
);
});
...
}
function MovieCard({ movie }: any) { <- this part
return (
<div className="movie">
<div className="movie-title">{ movie['title'] }</div>
<div className="movie-year">{ movie['year'] }</div>
</div>
);
};
i don't want to set "any". what i set type?
I would change it so you are passing the props down to the card that you want to use instead of a container object as the prop. That makes the typing simpler too. So you can do this:
interface MovieProps {
id: number;
title: string;
year: number;
}
function App() {
...
const movies: MovieProps[] = [
{ id:1, title: 'movie1', year: 2018 },
{ id:2, title: 'movie2', year: 2019 },
{ id:3, title: 'movie3', year: 2020 },
{ id:4, title: 'movie4', year: 2021 },
];
const renderMovies: JSX.Element[] = movies.map(movie => {
return (
<MovieCard key={ movie.id } {...movie} />
);
});
...
}
function MovieCard({ title, year }: MovieProps) { <- this part
return (
<div className="movie">
<div className="movie-title">{ title }</div>
<div className="movie-year">{ year }</div>
</div>
);
};
Just update type like this:
function MovieCard({ movie }: {movie: MovieProps })
You can do it as follows using the arrow syntax :
interface MovieProps {
id: number;
title: string;
year: number;
}
....
const MovieCard:React.FC<MovieProps>=({ id, title, year})=> {
return (
<div className="movie">
<div className="movie-title">{ title }</div>
<div className="movie-year">{year}</div>
</div>
);
};