I've been working on developing an event registration page for a school club I'm involved in, but I'm encountering a problem where my program is unable to correctly read the contents of an array and display each item as a ListItem within a List. When I trigger the function, the boolean expression this.state.events.length !== 0 returns False, even though console.log(this.state.events) confirms that the array is not empty.
What could be causing this issue and how do you suggest I tackle fixing it?
On a side note: I would greatly appreciate any feedback or critiques of my code. I'm relatively new to JavaScript, React, and MaterialUI and am eager to enhance my skills.
class EventSelector extends Component {
constructor(props){
super(props);
this.state = {
events: []
}
}
componentDidMount = () => {
var lst = [] // list of events with {key: "event_name"}
const eventsRef = db
.collection('events');
const offeredRef = eventsRef
.where('allowRegistration', '==', true)
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc)=> {
lst.push({key: doc.data().name, id: doc.id})
})
})
this.setState({ events: lst })
return true;
}
EventList = (events) => {
const { classes } = this.props;
return(
<div>
<Grid container item
direction='column'
alignItems='center'
justify='center'
style={{ maxHeight: '70vh', maxWidth: '50vw' }}
spacing={5}>
<Grid item>
<h1 className={classes.h1}>Upcoming Events</h1>
<h2 className={classes.h2}>Please select an event to sign up</h2>
</Grid>
<Grid container item direction='row' justify='center' spacing={5}>
<List component='b' subheader={<ListSubheader componenet='b'>Upcomming Events</ListSubheader>}>
{events.map(({key, id}) => {
return (
<div key={id}>
<ListItem button>
<ListItemText inset primary={key}/>
</ListItem>
</div>
);
}) }
</List>
</Grid>
</Grid>
</div>
);
}
render = () => {
const { classes } = this.props;
console.log(this.state.events)
var obj = Object.assign({}, this.state.events)
console.log(JSON.stringify(obj))
return (this.state.events.length !== 0 ? <h1>{JSON.stringify(this.state.events)}</h1> : <h2>Loading</h2>)
}
}
export default withStyles(styles)(EventSelector);