In JSX How To Redirect On Handlesubmit From DataPicker?

I am passing the date picked to the this.state.value Getting a time stamp of Midnight that day, but I can not seem to get it to render a new page so I can build the booking page. W

Solution 1:

It looks like the issue here is mixing up logic that should be rendered with logic that can go in an event handler method. In your first example, render is not a valid method that can be called from within handleSubmit, and in your second example, handleSubmit should not return components to be rendered.

You can get at your desired functionality by creating a state variable that indicates whether the user has submitted yet. Then you can check that variable when rendering (note that rendering is the return part of a functional component or the render method of a stateful component.

For example:

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: null, // for the date picker
            wasSubmitted: false,
        }
    }

    handleSubmit = event => {
        event.preventDefault();
        this.setState({wasSubmitted: true});
    }

    render() {
        const { value, wasSubmitted } = this.state;

        if (wasSubmitted) {
            return <Redirect to='/Bookingpage' />
        } else {
            return //... your normal component
        }
    }
}