React Router redirect after submitting a form using the input value

Vlad Bibire

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;
File

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;

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to redirect to another page with passing data after submitting form in using react-router-dom v6?

How to redirect user after submitting form with React

React router redirect after form submit

How to redirect after submitting form

React setState doesn't update the state after submitting input form

Cannot reset input fields after submitting form in React

Unable to clear the input field after submitting the form in React

Redirect to other view after submitting form

redirect to another page after submitting a form

How to redirect website after submitting google form?

Trying to redirect in PHP after submitting an email form

How to redirect after submitting form in php

target input value in the form to store in the localStorage after submitting the form and use the value for omdbapi

redirect using react router

Django Form after redirect is empty after successfully submitting a form

React - clearing an input value after form submit

form is not submitting using react and formik

After submitting my React form, is there an easier way of passing an object to the page I want to redirect to?

Using react-router to redirect upon form submission

React: How to clear file input and data input fields after submitting form?

Prevent Wrong Input in JS After Submitting A Form

Set the focus to input after submitting the form

How can I redirect to a new page after submitting a form using Jinja template?

How to redirect to List View Page in PHP CodeIgniter using parameters after submitting a form?

How to redirect to a new page using an object id after submitting a form in Django?

Not able to get form element's value after submitting form using this.form.submit();

Using React Router to Redirect to next page after successful login

How to redirect to another url using react-router after promise?

adding an input value and submitting the form on load