React TypeScript select field does not display-CodePudding

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:

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>

CodePudding user response：

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

delete {} wrapped outside <option value={symbol}>symbol</option>

CodePudding user response：

You need to return JSX inside map function. Also, initialize the state with empty array first and use key property for iterating any elements.

 const [symbols, setSymbols] = useState<string[]>([])
 const renderInputPanel = ()  => {
    return (
        <div className='input-panel'>
            <form>
            <select>
                {symbols.map((symbol, idx) => {
                    return <option key={idx} value={symbol}>{symbol}</option>
                })}
            </select>
            </form>
        </div>
    )
}

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

CodePudding user response：

You missed return before <option tag

Object is possibly 'undefined' as description says, it means that a Object is possibly 'undefined' so this can throw an error, there are multiple ways to solve this, I recommend Optional chaining.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

  const [symbols, setSymbols] = useState<string[]>();
  return (
    <div className="input-panel">
      <form>
        <select>
          {symbols?.map((symbol) => {
            return <option value={symbol}>symbol</option>;
          })}
        </select>
      </form>
    </div>
  );