Pass text field input value (if entered) as optional params to a GET api call in react-redux-typescript application

Question

<input type="text" onKeyPress={HandleKeyPress} value={text.id1} /> 
<input type="text2" onKeyPress={HandleKeyPress} value={text.id2} /> 
<input type="text3" onKeyPress={HandleKeyPress} value={text.id3} /> 

const HandleKeyPress = (event:React.KeyboardEvent<HTMLInputElement>) => {
if(event.key === 'Enter') {
dispatch( loadList{
type:viewType.search
})
) }}:

Slice.ts 
export const loadList = createAsyncThunk(
'List/get',
async(request:LoadListRequest) => {
const response = await getTask(request);
return response.data;
}};

const getTask = (
const Getcall = return axios.get("/api/search/?(add optional params here ??)

I am able to call the API with react-redux-typescript implementation, but have to pass optional params to the Get API - add in URL like - api/save/?id1=1234&id2=456&id3=789 if the user enters all three then add them in URL separated by "&". and if the user enters only one then add only one in URL params.

@wisnuaryadipa yes can you share a small snippet, thank you. — stec1, Dec 02 '21 at 01:05
The optional params to be passed in dynamically from text input field to url is the question here ? — stec1, Dec 02 '21 at 15:30

score -1 · Answer 1 · answered Dec 02 '21 at 01:51

Due to your example url is

const Getcall = return axios.get("/api/search/?(add optional params here ??)

I assume you want to pass dynamic variable to http request query string. So you can add config object on axios get request function like code below.

const GetCall = return await axios.get("/api/search/", { params: { id1: 1234, id2: 456, id3: 789} }

Pass text field input value (if entered) as optional params to a GET api call in react-redux-typescript application

1 Answers1