ReactJS: Show a list in a select inside a form

Question

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

Richard Hpa · Accepted Answer · 2021-09-14 08:51:03Z

1

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>
    );
 })}

answered Sep 14, 2021 at 8:51

Richard Hpa

2,90717 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

a.mola · Accepted Answer · 2021-09-14 08:51:25Z

1

You didn't return the options

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

answered Sep 14, 2021 at 8:51

a.mola

4,0119 silver badges23 bronze badges

Collectives™ on Stack Overflow

ReactJS: Show a list in a select inside a form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related