CODEWITHSUNDEEP
reactjshttp-redirectreduxsubmitredux-form
Eslam Allam
Eslam Allam

Reputation: 95

Error when trying to redirect after dispatching an action in Redux forms

thats my submitTask.tsx which is a separate file

import React from "react";
import { SubmissionError } from "redux-form";
import { Redirect } from "react-router-dom";
import { Dispatch } from "redux";
import { addNewTask } from "../actions/Task";

const submitTask = (values: any, dispatch: Dispatch) => {
  if (!values.category || !values.description) {
    throw new SubmissionError({
      _error: "All fields are required!"
    });
  } else {
    const taskValue = {
      id: values.id,
      category: values.category,
      description: values.description,
      createdAt: values.createdAt
    };

    dispatch(addNewTask(taskValue));
    return <Redirect to="/tasks" />; //this line causing problem when i add it 
  }
};

export default submitTask;

here is an error message from TaskForm.tsx, did any one have any idea whats wrong here?

image for error in VS code

Upvotes: 0

Views: 74

Answers (1)

user6700473
user6700473

Reputation:

Because functions return some value or data, not JSX.

To redirect you should try something like that:

myForm = () => {
    if(condition from redux store or local state){
        return <Redirect to={"/tasks"}/>
    }

    return (
        <ReduxForm onSubmit = {some function}/>
    );
}

Upvotes: 1

Related Questions