Append Text Input to URL in React

Question

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"
                            /

Anees Hikmat Abu Hmiad · Accepted Answer · 2021-05-12 18:11:48Z

2

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
});
        }
    }

answered May 12, 2021 at 18:11

Anees Hikmat Abu Hmiad

3,5602 gold badges23 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

Append Text Input to URL in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related