When using Redirect, my state won't update so I never redirect

Question

Background

I have a react/redux project with a form. I'd like it to redirect to another page on my site after the form is submitted.

In researching the issue here, I tried this and this and this, plus other solutions on github and none quite work. Most solutions dealt with a state change, some used withRouter. I'm not sure what I am missing.

Code

Here is my form.

import React from 'react'
import {connect} from 'react-redux'
import {addProgram} from '../../actions/addProgram'
import {Form} from 'semantic-ui-react'
import {Redirect} from 'react-router'

class ProgramInput extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      name: '',
      network: '',
      image: '',
      fireRedirect: false
    }
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    })
  }

  handleRedirect = event => {
    this.setState({
      fireRedirect: true
    })
  }

  handleSubmit = event => {
    event.preventDefault()

    this.props.addProgram(this.state)


    this.setState({
      name: '',
      network: '',
      image: '',
      fireRedirect: ''
    })
  }

  render(){
    const fireRedirect = this.state.fireRedirect

        if (fireRedirect === true) {
          return <Redirect to='/programs' /> }

    return(
            <Form onSubmit={this.handleSubmit}>
              <h2>Create a New Show</h2>
                <Form.Input
                  fluid
                  label='Name'
                  name='name'
                  value={this.state.name}
                  onChange={this.handleChange}
                  width={6} />
                <Form.Input
                  fluid
                  name='network'
                  label='Network'
                  value={this.state.network}
                  onChange={this.handleChange}
                  width={6} />
                <Form.Input
                  fluid
                  name='image'
                  label='Image Link'
                  value={this.state.image}
                  onChange={this.handleChange}
                  width={8} />
                <Form.Button>Submit</Form.Button>
            </Form>
    )
  }
}

export default connect(null, {addProgram})(ProgramInput)

Thank you very much for your time!

Answer 1

The reason your current code fails is because handleRedirect is never called. It's unnecessary to have this in it's own method, but if that's what you prefer, then just call handleRedirect() from handleChange.

Answer 2

You never call your handleRedirect function to update the fireRedirect state. Try modifying your handleSubmit function, and use fireRedirect in the setState call-back. This will give the visual effect of redirecting to "/programs" after submitting and clearing the form.

  handleSubmit = event => {
    event.preventDefault()

    this.props.addProgram(this.state)


    this.setState({
      name: '',
      network: '',
      image: '',
      fireRedirect: ''
    }, () => this.handleRedirect())
  }