Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

React TypeScript select field does not display

I got useState with a list of strings (currencies symbols like "USD", "EUR" etc.)

const [symbols, setSymbols] = useState<string[]>()

And I need to display it into the select field, right now I’m using this:


    const renderInputPanel = ()  => {
        return (
            <div className='input-panel'>
                <form>
                <select>
                    {symbols.map((symbol) => {
                        <option value={symbol}>symbol</option>
                    })}
                </select>
                </form>
            </div>
        )
    }

    return (<>
        {renderInputPanel()}
    </>)

It says the bug is in {symbols.map((symbol) =>..., but I have no idea what to do with it. Full Error:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

TS2322: Type 'void[]' is not assignable to type 'ReactNode'.
  Type 'void[]' is not assignable to type 'ReactFragment'.
    The types returned by '[Symbol.iterator]().next(...)' are incompatible between these types.
      Type 'IteratorResult<void, any>' is not assignable to type 'IteratorResult<ReactNode, any>'.
        Type 'IteratorYieldResult<void>' is not assignable to type 'IteratorResult<ReactNode, any>'.
          Type 'IteratorYieldResult<void>' is not assignable to type 'IteratorYieldResult<ReactNode>'.
            Type 'void' is not assignable to type 'ReactNode'.
    24 |                 <form>
    25 |                 <select>
  > 26 |                     {symbols.map((symbol) => {
       |                     ^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 27 |                         <option value={symbol}>symbol</option>
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  > 28 |                     })}
       | ^^^^^^^^^^^^^^^^^^^^^^^^
    29 |                 </select>
    30 |                 </form>
    31 |             </div>


ERROR in src/converter/Converter.tsx:26:22

TS2532: Object is possibly 'undefined'.
    24 |                 <form>
    25 |                 <select>
  > 26 |                     {symbols.map((symbol) => {
       |                      ^^^^^^^
    27 |                         <option value={symbol}>symbol</option>
    28 |                     })}
    29 |                 </select>

>Solution :

  1. add return before <option value={symbol}>symbol</option>

or

  1. delete {} wrapped outside <option value={symbol}>symbol</option>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading