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
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>
);
})}
You didn't return the options
....
{
realmsList.map((entity) => {
console.log("entity ", entity);
return (
<option key={entity.id} value={entity.id}>
{entity.name}
</option>
);
});
}