ReactJS - Can not return jsx for callback function?

Question

I have been working with react for a while but I got to very basic problem but I don't understand why it doesn't work. Basically, in Login component I submit a form and when it return an error, render a snackbar message.

  handleSubmit = (event) => {
    event.preventDefault()
  //api call here
    onFormSubmit(this.state)
     .then(() => history.push('/teams'))
     .catch(e => <Snackbar message={e}/>)
  }

  render() {

Console shows no errors but I don't see any snackbar when the onFormSubmit call fails.

Update

I understand now, I didn't place Snackbar inside render () { return (.... I can think of the only way to do it like that:

this.state = {
  email: '',
  password: '',
  error: ''
}
handleSubmit = (event) => {
event.preventDefault()
//api call here
onFormSubmit(this.state)
 .then(() => history.push('/teams'))
 .catch(e => this.setState({error: e})
}
render () {
 return (
   <div>
      {this.state.error && <Snackbar message={this.state.error}/>}....

But I don't want to submit also the error field to server. Is there another way to inject it to component?

The result of the Promise doesn't look to be used anywhere. If the catch occurs, it's just an orphaned expression not used anywhere.? — CertainPerformance
– CertainPerformance, Commented Jan 18, 2019 at 22:28
If the catch occurs, when I write catch(e => console.log(e)) . I can read the error message in console. What can I do to render the message? — tomen
– tomen, Commented Jan 18, 2019 at 22:31

Olivier Boissé · Accepted Answer · 2019-01-18 22:59:29Z

2

your solution is correct, you can also delegate the handleSubmit to the parent component, then if you have an error you display the Snackbar component otherwise you display the Form component.

In your example, if you don't want to post the error, you can destructure the state object to control the properties you want to send.

handleSubmit = (event) => {
  const {email, password} = this.state;
  event.preventDefault()
  //api call here

  onFormSubmit({email, password})
    .then(() => history.push('/teams'))
    .catch(e => this.setState({error: e})
}

answered Jan 18, 2019 at 22:59

Olivier Boissé

18.5k7 gold badges54 silver badges70 bronze badges

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

Comments

Christian Asivido · Accepted Answer · 2019-01-18 22:40:13Z

1

You will need to place that component into rendered JSX, or inject it somehow. Are you calling handleSubmit inside of your render's return?

One option is to use JQuery inside of that catch to inject that Snackbar onto the page.

A better option is to somehow trigger that component inside of your render's return like normal. For instance, set a localState variable of error to true inside of the catch, and then render the snackbar conditionally inside of your render based off this.state.error being true.

edited Jan 18, 2019 at 22:40

answered Jan 18, 2019 at 22:35

Christian Asivido

513 bronze badges

4 Comments

tomen Over a year ago

I call handleSubmit when click submit button

tomen Over a year ago

I updated my post with your idea. I just wonder, is there a cleaner way to have thing done.

Christian Asivido Over a year ago

I don't believe there is any way to inject that component to the current page solely within a non-render function without using something like JQuery.

Christian Asivido Over a year ago

If this answer was a solution to your problem, I'd love to get your vote on it! Just starting out on here, and it'd be nice to get some reputation points. If you even get those for having the chosen answer!

Collectives™ on Stack Overflow

ReactJS - Can not return jsx for callback function?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related