Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of ReactJS: Show a list in a select inside a form without wasting too much if your time.
The question is published on by Tutorial Guruji team.
The question is published on by Tutorial Guruji team.
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> ); })}
We are here to answer your question about ReactJS: Show a list in a select inside a form - If you find the proper solution, please don't forgot to share this with your team members.