Reputation: 127
I am trying to render genre Name and genre gradient using map function over,genres array.The map function works fine for the genre Name but for genre gradient it returns the same component.
I tried checking on the console. I am able to see two different colorrs but the final output on the screen is "GenreGradient" component with same color.
Please help with the same.
Kindlly find below my code.
import React, { useContext } from 'react';
import {
GenreContainer,
Genre,
GenreName
} from '../../styles/componentStyles/GenreDetails/genreCommonStyles';
import {
TheGrandPhilisophers,
GuidingLights,
ArchitectsOfFuture,
MaverickScientists,
Luminaries,
MenOfLetters
} from '../../styles/componentStyles/GenreDetails/genreDetails';
import GenreGradient from './GenreGradient';
import GenreFancyItemContext from '../../Context/genreFancyITem/GenreFancyItemContext';
const genres = [
{
genreName: 'guidingLights',
genreGradientColor: '#34e89e'
},
{
genreName: 'luminaries',
genreGradientColor: '#3b4490'
}
];
console.log(genres);
const GenreDetails = () => {
const genreFancyItemContext = useContext(GenreFancyItemContext);
const { getGenreName } = genreFancyItemContext;
return (
<GenreContainer>
{genres.map(genre => (
<Genre to={`/genreFancyitems/${genre.genreName}`}>
<GenreGradient genreColor={`${genre.genreGradientColor}`} />
<GenreName>{getGenreName(genre.genreName)}</GenreName>
</Genre>
))}
</GenreContainer>
);
};
export default GenreDetails;
import * as React from 'react';
const GenreGradient = props => {
console.log(props);
return (
<svg width={300} height={150} viewBox="0 0 92.704 53.017">
<defs>
<radialGradient
xlinkHref="#prefix__a"
id="prefix__b"
cx={-428.286}
cy={25.74}
fx={-428.286}
fy={25.74}
r={46.352}
gradientTransform="matrix(-.81297 -1.42269 1.99784 -1.14162 -241.802 -509.53)"
gradientUnits="userSpaceOnUse"
/>
<linearGradient id="prefix__a">
<stop offset={0} stopColor={props.genreColor} stopOpacity={0.808} />
<stop offset={1} stopColor={props.genreColor} stopOpacity={0} />
</linearGradient>
</defs>
<path
fill="url(#prefix__b)"
fillRule="evenodd"
d="M65.201 70.403h92.604v52.917H65.201z"
transform="translate(-65.15 -70.353)"
/>
</svg>
);
};
export default GenreGradient;
Upvotes: 0
Views: 49
Reputation: 1288
IDs are global in the page.
After render you have two elements with same id. And when you are trying to use it (xlinkHref="#prefix__a"
, fill="url(#prefix__b)"
), first element will be used.
You have to use different IDs for different elements. For example, you can use genreName as a prefix for ID.
Upvotes: 1