Question 74592 in Javascript Question posted in
A very good W3school tutorial can be found here.

Display svg icon in data.map, does not exist on type 'JSX.IntrinsicElements' – Javascript

I am trying to map my data to create map markers:

import ShellIcon from '../../../assets/images/xxx.svg';
import BPIcon from '../../../assets/images/xxx.svg';
import TexacoIcon from '../../../assets/images/xx.svg';

    return (
          <View style={styles.container}>
            ...
    
            <MapView
              ..>
              {staticData.map((marker, i) => {
                const MarkerIcon = marker.type;
    
                return (
                  <Marker key={index} coordinate={item.coordinates} ref={markerRef}>
                    <MapPin price={item.price} icon={MarkerIcon} />
                  </Marker>
                );
              })}
            </MapView>
          </View>
        );

Map Pin:

const MapPin = ({ price, icon }: Props) => (
  <View style={styles.bubbleContainer}>
    <View style={styles.bubbleContent}>
      <icon />
      <Text style={styles.bubblePrice}>{price}</Text>
    </View>
    <View style={styles.bubbleArrow} />
  </View>
);

My data is:

  const staticData = [
    {
      name: 'test station',
      type: 'ShellIcon',
      price: '15.00p',
      coordinates: {
        latitude: 52.56504897473243,
        longitude: -1.9835459043698045,
      },
    },
    {
      name: 'test station',
      type: 'BpIcon',
      price: '10.00p',
      coordinates: {
        latitude: 52.564655445785036,
        longitude: -1.9895132194946084,
      },
    },
    {
      name: 'test station',
      type: 'TexacoIcon',
      price: '12.00p',
      coordinates: {
        latitude: 52.56675992926686,
        longitude: -1.9925531724706291,
      },
    },
  ];
Tags:

2

Answers


  1. 0

    I believe what you need is the mapping:

    import ShellIcon from '../../../assets/images/xxx.svg';
import BPIcon from '../../../assets/images/xxx.svg';
import TexacoIcon from '../../../assets/images/xx.svg';

const ALL_ICONS = { ShellIcon, BPIcon, TexacoIcon };

return (
  <View style={styles.container}>
    <MapView>
      {staticData.map((marker, i) => {
        const MarkerIcon = ALL_ICONS[marker.type];
        return (
          <Marker key={index} coordinate={item.coordinates} ref={markerRef}>
            <MapPin price={item.price} icon={MarkerIcon} />
          </Marker>
        );
      })}
    </MapView>
  </View>
);

    You can’t just use the string value for it to obtain the variable from the import (Do note that marker.type is type of string whereas what you expecting in icon is something constructable like a SVG icon Component)

    Login or Signup to reply.
  2. 0

    I think it is because you initializing marker in the map but you try to reach the value using item.

    import ShellIcon from '../../../assets/images/xxx.svg';
import BPIcon from '../../../assets/images/xxx.svg';
import TexacoIcon from '../../../assets/images/xx.svg';

    return (
          <View style={styles.container}>
            ...
    
            <MapView
              ..>
              {staticData.map((marker, i) => {
                const MarkerIcon = marker.type;
    
                return (
                  <Marker key={index} coordinate={marker.coordinates} ref={markerRef}>
                    <MapPin price={marker.price} icon={MarkerIcon} />
                  </Marker>
                );
              })}
            </MapView>
          </View>
        );

    Also, move your icon to staticData like below:

    const staticData = [
    {
      name: 'test station',
      type: <ShellIcon/>,
      price: '15.00p',
      coordinates: {
        latitude: 52.56504897473243,
        longitude: -1.9835459043698045,
      },
    },
    {
      name: 'test station',
      type: <BpIcon/>,
      price: '10.00p',
      coordinates: {
        latitude: 52.564655445785036,
        longitude: -1.9895132194946084,
      },
    },
    {
      name: 'test station',
      type: <TexacoIcon/>,
      price: '12.00p',
      coordinates: {
        latitude: 52.56675992926686,
        longitude: -1.9925531724706291,
      },
    },
  ];

    And change MapPin too:

    const MapPin = ({ price, icon }: Props) => (
  <View style={styles.bubbleContainer}>
    <View style={styles.bubbleContent}>
      {icon}
      <Text style={styles.bubblePrice}>{price}</Text>
    </View>
    <View style={styles.bubbleArrow} />
  </View>
);

    If you do not want to do it like this you need to write switch case in order to pass MarkerIcon by using type from staticData.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search