ReactJS/Django How to encode search string into onClick button to redirect to exact URL?

Question

Noob in ReactJS and Django here. I have to model a website for a school project and we are using ReactJS for frontend and Django for backend. The app currently runs fine, but I encountered a problem to redirect my Search Button to the exact search page I need.

Here is what I want to do exactly:

1. User types in a string in the SearchBar. For example, types in: hello.

2. User presses the SearchButton.

3. The SearchButton will redirect the user to this EXACT path/url:

   http://127.0.0.1:8000/search/?q=hello

Currently, this is what I have:

export class SearchBar extends React.Component {

render() {
    return (
        <form onSubmit={this.handleSubmit}>
            <input type="text" placeholder="Search questions here" 
            id="query" name="/search/?q="/>
            <input type="submit" value="Search" 

        onclick="onLoadConfigPress(document.getElementById(name).value)" />
        </form>
      );
    }
  }

What this redirects me to is:

http://127.0.0.1:8000/?%2Fsearch%2F%3Fq%3D=ss

Clearly, that is not equal to:

http://127.0.0.1:8000/search/?q=hello

Because the onClick does not accept special characters from parameter "name", which are the chars: / /? =

So, my question is, is there a way to encode this "name" parameter, something like stringify() or EncodeUIC() or another easier way to redirect the SearchButton to the exact url?

Thank you in advance

Answer 1

I believe you first have to read and learn how react works, so you can get better results and not run into that kind of issues

first of all, I do not think this is ok, do you have onLoadConfigPress function and name variable globally? where do they come from?

<form onSubmit={this.handleSubmit}>
    <input type="text" placeholder="Search questions here" 
    id="query" name="/search/?q="/>
    <input type="submit" value="Search" 

onclick="onLoadConfigPress(document.getElementById(name).value)" />
</form>

You can refactor that to

<form onSubmit={this.handleSubmit}>
   <input 
      type="text" 
      placeholder="Search questions here" 
      onChange={this.handleChange}
    />
    <input type="submit" value="Search" />
</form>

where handleSubmit and handleChange are methods of your class Component SearchBar

Below you can find and example of your component and its functionality in the react way of doing it

class SearchBar extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      search : '',
      url : '',
      redirect : false
    }
    // binding the context to the SearchBar 
    // because this functions will be executed in a 
    // different context
    this.handleChange = this.handleChange.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
  }
  // Modify the search key of the component state
  handleChange (e) {
    this.setState({
      search : e.target.value
    });
  }
  // gets the user input
  // and build the url based on it
  handleSearch (e) {
    e.preventDefault(); // prevent page reload
    const { search } = this.state;
    const url = `your_url/search/?q=${encodeURIComponent(search)}`;


    console.log(url)
    // What do you want to do?
    // if fetch data based on the url
    // then make an http called using fetch
    // and update the state of your component 
    // using setState method

    // if redirect (assuming your have a SPA and using react router dom)
    // use
    // this.setState({
    //   url,
    //   redirect : true
    // });
    // that will force your component to rerender
  }

  render () {
    const { search, url, redirect } = this.state;
    // if you are using react-router-dom just 
    // render a Redirect Component
    // if (redirect) {
    //    return <Redirect to={url} />
    // }
    //
    return (
      <form onSubmit={this.handleSearch}>
        <input 
          value={search}
          onChange={this.handleChange}/>
        <button type="submit">Search</button>
      </form>
    );
  }

}

Answer 2

For encoding and decoding uri strings are:

encodeURIComponent(url)
decodeURIComponent(url)

https://www.w3schools.com/jsref/jsref_decodeuricomponent.asp

Hopefully that will help.