Question

73

Redirect with React Functional Components

rated 0 times [ 80] [ 7] / answers: 1 / hits: 18599 / 5 Years ago, sat, november 30, 2019, 12:00:00

I am in need of help, I am coding this form and after I submit it, the state for posted changes from false to true and I would expect return Redirect to=/landing ; to redirect me to the landing page, however, it doesn't which I assume is because the line doesn't re-run after the initial render. I was hoping that changing the state of posted would cause a re-render. I have heard about using history push and tried to adapt it to my code yet I failed. I don't know how to wrap my component with withRouter given that I have it already wrapped with connect. How can I achieve this? I have read numerous posts about this yet I can't figure how to adapt it to my code. Any help is appreciated.

import React, { useState } from react;

import Navbar from ./Navbar;

import { connect, useDispatch } from react-redux;

import { Redirect } from react-router-dom;

import { createProject } from ../actions/projectAction;

import PropTypes from prop-types;

import { push } from connected-react-router;



const EditProject = ({ posted, createProject }) => {

  const dispatch = useDispatch();

  const [formData, setFormData] = useState({

    projectTitle: ,

    projectDescription: ,

    deliveryDate: 

  });



  const { projectTitle, projectDescription, deliveryDate } = formData;



  const onChange = e => {

    setFormData({ ...formData, [e.target.name]: e.target.value });

  };



  const onSubmit = async e => {

    e.preventDefault();

    createProject({ projectTitle, projectDescription, deliveryDate });

    dispatch(push(/login));

  };



  if (posted) {

    return <Redirect to=/landing />;

  }



  return (

    <div>

      <Navbar />

      <div className=container>

        <form onSubmit={e => onSubmit(e)}>

          <h4>Project Title</h4>

          <input

            name=projectTitle

            value={projectTitle}

            className=form-control

            placeholder=Your project title

            onChange={e => onChange(e)}

          />

          <h4>Delivery Date</h4>

          <input

            type=date

            className=form-control

            name=deliveryDate

            value={deliveryDate}

            onChange={e => onChange(e)}

          />

          <h4>Description</h4>

          <textarea

            name=projectDescription

            value={projectDescription}

            className=form-control

            rows=10

            onChange={e => onChange(e)}

          ></textarea>

          <input type=submit className=btn btn-primary value=Create />

          <a href=/projects className=btn btn-danger>

            Cancel

          </a>

        </form>

      </div>

    </div>

  );

};



EditProject.propTypes = {

  createProject: PropTypes.func.isRequired

};



const mapStateToProps = state => ({

  posted: state.posted

});



export default connect(mapStateToProps, { createProject })(EditProject);

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

odaliss

Add To Favorites

Follow

Total Points: 342

Total Questions: 102

Total Answers: 98

Location: The Bahamas

Member since Tue, Apr 27, 2021

3 Years ago

answered 5 Years ago kelsy · Accepted Answer

I think you have to define your route. From my following code you can get a little bit idea of the routing.

In App.js basically I defined the routes and I have created two more functional components Landing and EditProject to simulate your idea. Moreover I have used Link for navigation purpose

App.js

import React, { Component } from react;

import { BrowserRouter, Route, Switch, Link } from react-router-dom;

import EditProject from ./editProject;

import Landing from ./landing;



class App extends Component {

  render() {

    return (

      <BrowserRouter>

        <div id=container>

          <div>

            <Link to=/>Landing Page</Link>

            <Link to=/editproject>Edit Project</Link>

          </div>

          <Switch>

            <Route path=/editproject component={EditProject} />

            <Route exact path=/ component={Landing} />

          </Switch>

        </div>

      </BrowserRouter>

    );

  }

}



export default App;

Landing functional component

import React from react;



const Landing = () => {

  return <h1>Landing Page</h1>;

};



export default Landing;

EditProject functional component

import React from react;



const EditProject = props => {

  function handleSubmit(e) {

    e.preventDefault();

    console.log(submitted);

    //do your task here before redirect

    //...

    props.history.push(/);

  }



  return (

    <div>

      <h1>Edit Project</h1>

      <form onSubmit={handleSubmit}>

        <button>Submit</button>

      </form>

    </div>

  );

};



export default EditProject;

Hope it will help you.