React - .map inside ternary (jsx)

Question

I'm a bit stuck with this. I need to create a Dropdown from a specific dataSource (array) with .map, but in case the ternary condition is true, need the options from dataSource + another option.

I tried this, but it's not rendering

         <Dropdown
          key={dataSource}
          type="form"
          label=""
          primary="Select..."
          valid={validation.dataSource.isValid}
          message={validation.dataSource.message}
          className="query-type__datasource-dropdown"
          disabled={mode === 'view' || (dataSource === 'xde' && !showXDE)}
          onChange={(e, value) => { onChangeDatasource(value) }}

          (showXDE || dataSource === 'xde') ?
          {dataSources.map(dataSourceItem => {
            <DropdownItem
              key={dataSourceItem.id}
              value={dataSourceItem.id}
              primary={dataSourceItem.description}
              selected={dataSource === dataSourceItem.id}
            />
          })}
          <DropdownItem
            key="xde"
            value="xde"
            primary="XDE"
            selected={dataSource === 'xde'}
            />
          :
          {dataSources.map(dataSourceItem => {
            <DropdownItem
              key={dataSourceItem.id}
              value={dataSourceItem.id}
              primary={dataSourceItem.description}
              selected={dataSource === dataSourceItem.id}
            />
          })}
         </Dropdown>

EDIT: Added rest of the Dropdown info for references

Answer 1

I think you are looking for something like this:

      {showXDE || dataSource === "xde" ? (
        <>
          {dataSources.map((dataSourceItem) => (
            <DropdownItem
              key={dataSourceItem.id}
              value={dataSourceItem.id}
              primary={dataSourceItem.description}
              selected={dataSource === dataSourceItem.id}
            />
          ))}
          <DropdownItem
            key="xde"
            value="xde"
            primary="XDE"
            selected={dataSource === "xde"}
          />
        </>
      ) : (
        dataSources.map((dataSourceItem) => (
          <DropdownItem
            key={dataSourceItem.id}
            value={dataSourceItem.id}
            primary={dataSourceItem.description}
            selected={dataSource === dataSourceItem.id}
          />
        ))
      )}

The first issue with your code is that your map functions don't actually return anything and thus won't render what's inside them. By dropping the curly braces, you implicitly add a return statement.

The other issue is there has to be a parent to the two elements inside your first ternary condition. i.e you cannot have two siblings without a parent, which is what you tried to do. Adding <>...</> rectifies that problem. <React.Fragment>...</React.Fragment> is commonly used. You could also add <div>...</div>, but that would depend on your styling.

Answer 2

The problem is that you are not returning components from the map:

(showXDE || dataSource === 'xde') ?
   {dataSources.map(dataSourceItem => {
     return(
       <DropdownItem
        key={dataSourceItem.id}
        value={dataSourceItem.id}
        primary={dataSourceItem.description}
        selected={dataSource === dataSourceItem.id}
       />
     )
    })}
    <DropdownItem
      key="xde"
      value="xde"
      primary="XDE"
      selected={dataSource === 'xde'}
     />
     :
     {dataSources.map(dataSourceItem => {
       return (
         <DropdownItem
          key={dataSourceItem.id}
          value={dataSourceItem.id}
          primary={dataSourceItem.description}
          selected={dataSource === dataSourceItem.id}
         />
       )
      })}