JSX if/else syntax within React - reactjs

Question

I'm trying to figure out how to add an if/else here so that if classroomId has a value, the importUserToClassroom endpoint will be hit. If not, I'd like to execute the same code, but with the importUsers endpoint. Any ideas on where I'm going wrong with my syntax would be much appreciated!
handleFormSubmit(data) {
const {
importUserToClassroom,
importUsers,
addFlashMessage,
formatErrors,
showUiBlocked,
hideUiBlocked,
match: {params: {classroomId}},
} = this.props;
showUiBlocked();
const users = userDataToList(data);
{
classroomId !== undefined ? (
importUserToClassroom({
users,
classroomId,
})
) : (
importUsers({users})
)
}
.then(() => {
hideUiBlocked();
addFlashMessage('Users imported successfully', 'success');
this.context.router.history.push('/users');
})
.catch(err => {
hideUiBlocked();
if (err.status !== 409) {
return formatErrors(err).then(err => {
this.setState({
errors: err,
});
});
} else {
this.setState({
errors: {
usernames: err.data.message,
}
});
}
});
}
Update: The following ended up working!
handleFormSubmit(data) {
const {
importUserToClassroom,
importUsers,
addFlashMessage,
formatErrors,
showUiBlocked,
hideUiBlocked,
match: {params: {classroomId}},
} = this.props;
showUiBlocked();
const users = userDataToList(data);
if (!isEmpty(classroomId)) {
importUserToClassroom({
users,
classroomId,
})
.then(() => {
hideUiBlocked();
addFlashMessage('Users imported successfully', 'success');
this.context.router.history.push('/users');
})
.catch(err => {
hideUiBlocked();
if (err.status !== 409) {
return formatErrors(err).then(err => {
this.setState({
errors: err,
});
});
} else {
this.setState({
errors: {
usernames: err.data.message,
}
});
}
});
} else {
importUsers({users})
.then(() => {
hideUiBlocked();
addFlashMessage('Users imported successfully', 'success');
this.context.router.history.push('/users');
})
.catch(err => {
hideUiBlocked();
if (err.status !== 409) {
return formatErrors(err).then(err => {
this.setState({
errors: err,
});
});
} else {
this.setState({
errors: {
usernames: err.data.message,
}
});
}
});
}
}

Answer 1

This isn't really JSX, but you do have some syntax errors. You can't use curly brackets like that. If importUserToClassroom and importUsers return promises, you could try something like this:
const savePromise = classroomId ?
importUserToClassroom({
users,
classroomId,
}) :
importUsers({users});
savePromise.then(() => {
hideUiBlocked();
addFlashMessage('Users imported successfully', 'success');
this.context.router.history.push('/users');
})