0

I am using React in my project and having trouble getting the Wi-Fi Signal Strength Icon next to the networks name. (These two fields come from an external endpoint.)

The error I'm getting in the console (f12) would be this: validateDOMNesting(...): cannot appear as a child of . Does anyone know how to solve it in the code, so that the Icon appears within the select options?

Code:

                  {wifiNetwork.map((option, index) => (
                  <option key={index} value={option.network_name}>
                    {option.network_name}
                    {option.signal_strength >= 0 && option.signal_strength < 25 ? (
                      <BiWifi0/>
                    ) : (
                      <BiWifi/>
                    )}
                  </option>
                ))}

I need to do Put the Signal Strength Icons Wifi next to the network name:

It only works for now if I put a String in place of the SVG, because according to the suggestion of this topic: Suggest, the option tag only accepts plain text, but they did not make clear a possible alternative. Would it be styling a proper CSS for these Icon?

Any suggestions on how I can resolve this in code?

Tiago Severo
  • 3
  • 3
  • https://stackoverflow.com/questions/2965971/how-to-add-images-in-select-list – CBroe Jan 25 '23 at 13:10
  • Thanks for your Suggest @CBroe. But This code isn't working not in Firefox or Chrome. Feature not supported. And my svg i m getting in https://react-icons.github.io/react-icons/search?q=biwifi. – Tiago Severo Jan 25 '23 at 14:01
  • Some of the responses in that thread include the suggestion that you might need to use a custom select replacement, if what you want is simply not achievable using the current state of technology regarding native select fields ... – CBroe Jan 25 '23 at 14:05
  • An alternative could be to use an actual icon _font_, instead of SVGs. Then you could place the corresponding _character_ at the beginning of your option text. (Although it would have to be a font then, that doesn't use any "normal" characters that might occur in your network names - you only get "one text" inside the options that you can format, so you'd have to apply the icon font, and then rely on the browser automatically using a fallback font for any characters, for which the icon font doesn't contain a glyph ...) – CBroe Jan 25 '23 at 14:09
  • Thanks again for your suggestions @CBroe. I believe I will use this mentioned alternative. I will try to implement it. Thanks for your attention. – Tiago Severo Jan 25 '23 at 14:36

1 Answers1

0

To solve my problem I had to use a React component. React Select, using this example:

Example Using React Select Component

It was possible to work around the problem, because with this component it displays the Icons, as they are not within an option tag.

My code:

const listValues = () => {
return (
  wifiNetwork &&
  wifiNetwork.map(option => {
    let signal = null;
    if (option.signal_strength !== 0) signal = <BiWifiOff/>;
    if (option.signal_strength === 100) signal = <GrWifi/>;
    const value = {
      value: option.network_name,
      label: (
        <>
          {signal}
          <span style={{ paddingRight: '5px' }}>&nbsp;{option.network_name}</span>
        </>
      ),
    };
    return value;
  })
);};

           <div className="rg-select">
              <div className="rg-select-component">
                <label className="rg-select-label">Wifi Networks</label>
                <Select
                  options={listValues()}
                  placeholder="Select Wifi Network" />
              </div>
            </div>

I believe that would be a possibility to work around this problem. Other means would be to use Unicodes in the code, but I was worried about browser support.

Tiago Severo
  • 3
  • 3