CODEWITHSUNDEEP
javascriptreactjsurlreact-routerreact-router-dom
Rob B.
Rob B.

Reputation: 128

Append Text Input to URL in React

I'm trying to append a text value to the following "http://3-10.cetecerpdevel.com:3101/customer/list_new" from the TextFilter of "?external_key=blabla" in react. So in other words,http://3-10.cetecerpdevel.com:3101/customer/list_new?external_key=blabla. I have looked at doing react-router but it doesn't seem viable for what I'm doing and I tried URLSearchParams. The code below is the snippets I'm working with. How would you do this?

function OnChange(text){
        if (text === null) {
            console.log("Do nothing");
        } else {
            //append to url
            console.log("Hi")
            let url = new URL('https://example.com?foo=1&bar=2');

            let test = document.getElementById('ExternalKey');
            // just append a word to the url
            const blah = "blah";
            
            console.log("test",test);
        }
    }

...

<TextFilter
                                label="External Key"
                                urlText={OnChange()}
                                id="ExternalKey"
                                placeholder="Search External Key"
                                dataFieldName="me.external_key"
                                divClass="form-field column third"
                            /

Upvotes: 0

Views: 1421

Answers (1)

Anees Hikmat Abu Hmiad
Anees Hikmat Abu Hmiad

Reputation: 3550

Simply you can use useHistory to do that like this:

const history = useHistory();

history.push({
      pathname: "/",// Current Path
      search: "?color=blue"// Your Param needed
    });

any thing on search will append to url...

function OnChange(text){
        if (text === null) {
            console.log("Do nothing");
        } else {
            history.push({
  pathname: "/",// Current Path
  search: "?foo=1&bar=2"// Your Param needed
});
        }
    }

Upvotes: 2

Related Questions