I am trying to modify the code listed below. It is designed to loop through elements of an array using keys to find images using a long SVG file posted right into the document, indicated by "SomelongUglySVG".

Because SVGs take up a lot of space and can bloat a file if all placed together, I want to save each of my SVGs as separate react ponents and then just import them into a single layout. I have tested the ponents and they all render successfully in the layout, but when I try to place them in the array, they are not rendered.

Tl;Dr Basically, if storing ponents in an array and looping them through a function is not viable, what would be the best way to loop react ponents through a function?

The base code:

   const items = [
  {
    src: 'SomelongUglySVG',
    altText: 'Slide 1',
    caption: 'Slide 1'
  },
  {
    src: 'SomeLongUglySVG',
    altText: 'Slide 2',
    caption: 'Slide 2'
  },
  {
    src: 'SomeLongUglySVG',
    altText: 'Slide 3',
    caption: 'Slide 3'
  }
];

--trimmed the code in between for sake of brevity--

const slides = items.map((item) => {
      return (
        <CarouselItem
          onExiting={this.onExiting}
          onExited={this.onExited}
          key={item.src}
        >
          <img src={item.src} alt={item.altText} />
          <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
        </CarouselItem>
      );
    });

The code I would like to use:

  const items = [
  {
    src: <SVGponent1>,
    altText: 'Slide 1',
    caption: 'Slide 1'
  },
  {
    src: <SVGponent2>,
    altText: 'Slide 2',
    caption: 'Slide 2'
  },
  {
    src: <SVGponent3>,
    altText: 'Slide 3',
    caption: 'Slide 3'
  }
];

const slides = items.map((item) => {
  return (
    <CarouselItem
      onExiting={this.onExiting}
      onExited={this.onExited}
      key={item.src}
    >
      <img src={item.src} alt={item.altText} />
      <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
    </CarouselItem>
  );
});

--trimmed excess code here for brevity--

const slides = items.map((item) => {
      return (
        <CarouselItem
          onExiting={this.onExiting}
          onExited={this.onExited}
          key={item.src}
        >
          <img src={item.src} alt={item.altText} />
          <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
        </CarouselItem>
      );
    });

I am trying to modify the code listed below. It is designed to loop through elements of an array using keys to find images using a long SVG file posted right into the document, indicated by "SomelongUglySVG".

Because SVGs take up a lot of space and can bloat a file if all placed together, I want to save each of my SVGs as separate react ponents and then just import them into a single layout. I have tested the ponents and they all render successfully in the layout, but when I try to place them in the array, they are not rendered.

Tl;Dr Basically, if storing ponents in an array and looping them through a function is not viable, what would be the best way to loop react ponents through a function?

The base code:

   const items = [
  {
    src: 'SomelongUglySVG',
    altText: 'Slide 1',
    caption: 'Slide 1'
  },
  {
    src: 'SomeLongUglySVG',
    altText: 'Slide 2',
    caption: 'Slide 2'
  },
  {
    src: 'SomeLongUglySVG',
    altText: 'Slide 3',
    caption: 'Slide 3'
  }
];

--trimmed the code in between for sake of brevity--

const slides = items.map((item) => {
      return (
        <CarouselItem
          onExiting={this.onExiting}
          onExited={this.onExited}
          key={item.src}
        >
          <img src={item.src} alt={item.altText} />
          <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
        </CarouselItem>
      );
    });

The code I would like to use:

  const items = [
  {
    src: <SVGponent1>,
    altText: 'Slide 1',
    caption: 'Slide 1'
  },
  {
    src: <SVGponent2>,
    altText: 'Slide 2',
    caption: 'Slide 2'
  },
  {
    src: <SVGponent3>,
    altText: 'Slide 3',
    caption: 'Slide 3'
  }
];

const slides = items.map((item) => {
  return (
    <CarouselItem
      onExiting={this.onExiting}
      onExited={this.onExited}
      key={item.src}
    >
      <img src={item.src} alt={item.altText} />
      <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
    </CarouselItem>
  );
});

--trimmed excess code here for brevity--

const slides = items.map((item) => {
      return (
        <CarouselItem
          onExiting={this.onExiting}
          onExited={this.onExited}
          key={item.src}
        >
          <img src={item.src} alt={item.altText} />
          <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
        </CarouselItem>
      );
    });

• javascript
• arrays
• reactjs
• loops
• svg

1 Answer 1

Certainly.

If you want to pass instances of the ponent, what you're doing is fine except that you need to close those JSX tags:

{
  src: <SVGComponent1 />,
  ...

Or if you want to pass the ponent class/function itself:

{
  src: SVGComponent1,
  ...

It's not totally clear what you're trying to do in your usage, though -- what are you hoping to achieve by passing a ponent to the src attribute of an img tag?

Perhaps that's old code you forgot to update for passed ponents and you mean this:

  const slides = items.map((item, index) => {
      return (
        <CarouselItem
          onExiting={this.onExiting}
          onExited={this.onExited}
          key={index}
        >
          {item.src}
          <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
        </CarouselItem>
      );
    });

This ought to work just fine when a ponent instance was passed.

Note I also changed the key attribute, since I'm not sure passing a ponent to that will work!