CODEWITHSUNDEEP
javascriptreactjs
SM1105922
SM1105922

Reputation: 127

Map function is not being applied to all expressions

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

Answers (1)

Aleksandr Petrov
Aleksandr Petrov

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

Related Questions