Computations created outside a `createRoot` or `render` will never be disposed

I am migrating my React application to Solid and I am encountering some problems.

When using this component that provides me with information about a phone's DDI, I get the error in image 1 and the component is this one:

const flag = (name) => `https://url-for-search-img/${name}.jpg`

export const countryList = [
    {
        flag: <img style={{width: '18px'}}  src={flag('br')}/>,
        countryLabel: 'Brazil | Brasil',
        countryCode: 'br',
        value: '55',
        code: '+55'
    },

    {
        flag: <img style={{width: '18px'}}  src={flag('mx')} />,
        countryLabel: 'Mexico | México',
        countryCode: 'mx',
        value: '52',
        code: '+52'
    }
]

const flag = (name) => `https://url-for-search-img/${name}.jpg`

export const countryList = [
    {
        flag: <img style={{width: '18px'}}  src={flag('br')}/>,
        countryLabel: 'Brazil | Brasil',
        countryCode: 'br',
        value: '55',
        code: '+55'
    },

    {
        flag: <img style={{width: '18px'}}  src={flag('mx')} />,
        countryLabel: 'Mexico | México',
        countryCode: 'mx',
        value: '52',
        code: '+52'
    }
]

And I am using this component here:

{countryList.map((countryItem, countryItemIndex) => (
            <option
              value={`${countryItem.value}`}
              key={'flag_option_v1_' + countryItemIndex}
            >
              {countryItem.code}
            </option>
          ))}

{countryList.map((countryItem, countryItemIndex) => (
            <option
              value={`${countryItem.value}`}
              key={'flag_option_v1_' + countryItemIndex}
            >
              {countryItem.code}
            </option>
          ))}

I tried changing the array to a function, like this:

  countryList = [...]
  countryList.map

  countryList = [...]
  countryList.map

countryList = () => [...]
  countryList().map

countryList = () => [...]
  countryList().map

But I still get errors, as shown in image 2.

Computations created outside a `createRoot` or `render` will never be disposed

const flag = (name) => `https://url-for-search-img/${name}.jpg`

export const countryList = [
    {
        flag: <img style={{width: '18px'}}  src={flag('br')}/>,
        countryLabel: 'Brazil | Brasil',
        countryCode: 'br',
        value: '55',
        code: '+55'
    },

    {
        flag: <img style={{width: '18px'}}  src={flag('mx')} />,
        countryLabel: 'Mexico | México',
        countryCode: 'mx',
        value: '52',
        code: '+52'
    }
]

const flag = (name) => `https://url-for-search-img/${name}.jpg`

export const countryList = [
    {
        flag: <img style={{width: '18px'}}  src={flag('br')}/>,
        countryLabel: 'Brazil | Brasil',
        countryCode: 'br',
        value: '55',
        code: '+55'
    },

    {
        flag: <img style={{width: '18px'}}  src={flag('mx')} />,
        countryLabel: 'Mexico | México',
        countryCode: 'mx',
        value: '52',
        code: '+52'
    }
]

And I am using this component here:

{countryList.map((countryItem, countryItemIndex) => (
            <option
              value={`${countryItem.value}`}
              key={'flag_option_v1_' + countryItemIndex}
            >
              {countryItem.code}
            </option>
          ))}

{countryList.map((countryItem, countryItemIndex) => (
            <option
              value={`${countryItem.value}`}
              key={'flag_option_v1_' + countryItemIndex}
            >
              {countryItem.code}
            </option>
          ))}

I tried changing the array to a function, like this:

  countryList = [...]
  countryList.map

  countryList = [...]
  countryList.map

countryList = () => [...]
  countryList().map

countryList = () => [...]
  countryList().map

But I still get errors, as shown in image 2.

Computations created outside a `createRoot` or `render` will never be disposed

Similar Threads

Computations created outside a `createRoot` or `render` will never be disposed

Similar Threads

Similar Threads

Similar Threads