React Router redirect after submitting a form using the input value

Question

Form.js

What I wish to get out of this form is a link like '/search/inputValue/' so from another component I can extract the parameter. What I get instead is just '/search/' without the input value.

import React from 'react';
import { Link } from 'react-router-dom';

class Form extends React.Component {
    state = {
        searched: ''
    }

    onSubmit = (e) => {
        const keyword = e.target.elements.keyword.value;
        this.setState({ searched: keyword });
    }

    render(){
        return (
            <form className="form-inline" onSubmit={this.onSubmit}>
                <div className="form-group">
                    <input type="text" className="form-control" name="keyword" placeholder="Image keyword" />

                    <Link to={ `/search/${this.state.searched}`}>
                        <button className="btn btn-primary">Search</button>
                    </Link>
                </div>
            </form>       
        );
    }
};

export default Form;

I have noticed that the state updates its value after a second submit with the older input value, so the problem might be from here.

This can be checked by removing the Link tag, preventDefault and console log the input value. The first one is blank and the second one is with the previous input value.

My whole app is sorted, I just need to figure how to submit to a link from an input.

Router.js

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

import App from '../App';
import SearchPage from './SearchPage';

const Router = () => (
    <BrowserRouter>
        <Switch>
            <Route path="/" component={App} exact />
            <Route path="/search/:keyword" component={SearchPage} />
        </Switch>
    </BrowserRouter>
);

export default Router;

ABC · Accepted Answer · 2018-10-02 15:08:50Z

3

Basically after finally getting to a computer to help you, I realized one of my first responses was correct.

You needed to:

Bind the handleChange method. All methods you define in an object passed to React.createClass will be automatically bound to the component instance.
Every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input. That is why we have the handleChange function.
Since the value attribute is set on our form element, the displayed value will always be this.state.value, making the React state the source of truth. Since handleChange runs on every keystroke to update the React state, the displayed value will update as the user types..

Since he is not submitting a form actually, this is the correct way to do this. However, if you were submitting form, ditch the dynamic link and use the form action property.

import React from 'react';
import { Link } from 'react-router-dom';

class App extends React.Component {
 /** Left some things in here commented out, 
     incase you start doing form submissions. Instead of a dynamic link.
  **/
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);

    /**  If you start submitting forms
    this.handleSubmit = this.handleSubmit.bind(this);  
    **/
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  /** If you start submitting forms, add onSubmit={this.onSubmit} to form action
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  } 
  **/

  render() {
    return (
    <div>
       <form className="form-inline">
                <div className="form-group">
                    <input type="text" value={this.state.value} onChange={this.handleChange} className="form-control" name="keyword" placeholder="Image keyword" />

                    <Link to={`/search/${this.state.value}`}>
                        <button className="btn btn-primary">Search</button>
                    </Link>
                </div>
            </form>
      </div>
    );
  }
}

export default App;

edited Oct 2, 2018 at 15:08

answered Oct 2, 2018 at 13:57

ABC

2,1581 gold badge13 silver badges24 bronze badges

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

9 Comments

Vlad Bibire Over a year ago

I understand your point of view, however, you have no input in your form. What I'd like to achieve is something like 'this.props.history.push('/search/' + inputValue)'. I've also update my request with the Router.js file so it will be more explicit

ABC Over a year ago

I edited it, I am trying to help you without a computer handy. I think I got the idea. Then you would just add the input, and replace the query parameter to the url endpoint. I figured you understand the part.

Vlad Bibire Over a year ago

Please re-read the request one more time so it will be more clear. Your form must have an <input type=text /> and the value entered there should appear in a link like '/search/inputValue'.. hope it's easier now

ABC Over a year ago

I edited it again. You bind the value up top in my example, and while onChange you are constantly updating the state. Then you had the right idea in the link to have it read the state for the current searched string. I understand what your trying to do now, tell me if it works.

Vlad Bibire Over a year ago

Damn, I appreciate the effort you put into this.. but the problem is just with that stat for showing the first value to be an empty string and then the second one being the one I need.

|

Bastien · Accepted Answer · 2018-10-02 14:33:38Z

0

I think you should not wrap the submit button with a Link. But you should add a e.preventDefault() in your onSubmit() to prevent form to be submitted and prevent the browser to redirection/refresh.

You should add the redirection directly at the end of your onSubmit method with the history API (https://reacttraining.com/react-router/web/api/history)

answered Oct 2, 2018 at 14:33

Bastien

1581 silver badge11 bronze badges

4 Comments

ABC Over a year ago

We had tried the history method in one of my original responses, it seems he wants a link that is dynamically changes its href. And when he types in form, first type is null. Second is valid from state.

Vlad Bibire Over a year ago

Link being from react-router it will not cause a refresh, just a redirect to another component. With or without preventDefault, is the same result in this situation. I will try with history and come back with an answer

Vlad Bibire Over a year ago

Yes, as @Raymond said. A dynamic link created by a user input. Basically, it's a search form and after the user enters his request, for example 'desk', the link should be '/search/desk' but first state value is null, and the second one is valid

Bastien Over a year ago

The problem with you solution is that you ask for react-router to redirect to a link. but at the same time your form is submitted and so your browser refesh itself

Yann · Accepted Answer · 2020-01-22 17:52:59Z

I've struggled with the same issue. I am on a project with React Router 4. What I found so far is,

It depends on how you set up your Routes.
If you use component attribute to render a component, such as <Route to="/path" component={Name} />, the component will have data (history, location and match)
If so, you can use input value to redirect using history.path etc. See the code below.
However, if you use render method such as <Route to="/path" render={()=> <Component />} /> to pass data to a child component, the rendered component have nothing.

class Home extends Component {
  handleSubmit = e => {
    e.preventDefault();
    let teacherName = this.name.value;
    let teacherTopic = this.topic.value;
    let path = `teachers/${teacherTopic}/${teacherName}`;
    // this is the part !!!
    this.props.history.push(path);
  };

  render() {
    return (
      <div className="main-content home">
        <h2>Front End Course Directory</h2>
        <p>
          This fun directory is a project for the <em>React Router Basics</em> course on Treehouse.
        </p>
        <p>
          Learn front end web development and much more! This simple directory app offers a preview
          of our course library. Choose from many hours of content, from HTML to CSS to JavaScript.
          Learn to code and get the skills you need to launch a new career in front end web
          development.
        </p>
        <p>
          We have thousands of videos created by expert teachers on web design and front end
          development. Our library is continually refreshed with the latest on web technology so you
          will never fall behind.
        </p>
        <hr />
        <h3>Featured Teachers</h3>
        <form onSubmit={this.handleSubmit}>
          <input type="text" placeholder="Name" ref={input => (this.name = input)} />
          <input type="text" placeholder="Topic" ref={input => (this.topic = input)} />
          <button type="submit">Go!</button>
        </form>
      </div>
    );
  }
}

It was mentioned nowhere while I am learning, was really pain in the ass to figure out just this small fact. Anyway, happy coding!

Collectives™ on Stack Overflow

React Router redirect after submitting a form using the input value

3 Answers 3

9 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related