ReactJS: Show a list in a select inside a form

I’m trying to show a list inside a form, but I don’t understand why it isn’t showed.

useEffect(() => {
    props.getRealms(); // I make call to api
    localStorage.setItem('realm', JSON.stringify(realm));
  }, [realm]);

  const { realmsList, loadingRealms } = props;
  console.log('realmsList.length ', realmsList.length);

  return (
    <div>
      <AvForm model={{}} onSubmit={saveEntity}>
        {realmsList.length > 0 ? (
          <div>
            <AvGroup>
              <Label>Realm</Label>
              <AvInput id="personaInfo-realm" data-cy="realm" type="select" name="realm">
                <option value="" key="0">
                  Choose Realm
                </option>
                {realmsList.map(entity => {
                  console.log('entity ', entity),
                    (
                      <option key={entity.id} value={entity.id}>
                        {entity.name}
                      </option>
                    );
                })}
              </AvInput>
            </AvGroup>
            <Button color="primary" id="save-entity" data-cy="entityCreateSaveButton" type="submit" style={{ marginLeft: 10 }}>
              <FontAwesomeIcon icon="save" /> Save
            </Button>
          </div>
        ) : (
          <div className="d-flex justify-content-center">
            <div className="spinner-border text-primary" role="status">
              <span className="visually-hidden"></span>
            </div>
          </div>
        )}
      </AvForm>
    </div>
  );
};

const mapStateToProps = ({ sceRealm }: IRootState) => (
  {
    realmsList: sceRealm.entities,
    loadingRealms: sceRealm.loading,
  }
);

const mapDispatchToProps = {
  getRealms,
};

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(mapStateToProps, mapDispatchToProps)(ScePersonaInfoUpdate);

In my return I wrote this condition: realmsList.length > 0, but the only thing that I can see it the write “Choose Realm” and not the realm list. The console log inside the map, show the entities of the list.

How can I fix it?

Thank you

Answer

You don’t have a return inside your map so nothing is actually happening with your map

{realmsList.map(entity => {
    console.log('entity ', entity),
     return (
         <option key={entity.id} value={entity.id}>
            {entity.name}
         </option>
    );
 })}