The rendered input is acting as object rather than string in React

Question

The rendered input is getting interpreted as word 'object' rather than text getting entered in input in React. So I have this API I want to search with input while I am searching it is getting written word 'object' rather than what am I writing.

Object is getting written instead of what I searched for

Here I searched for input but again object is getting written in query

import { useState } from "react";

function () {
  const [endpoint, setEndpoint] = useState("");

  function searchChange(e) {
    setEndpoint(e.target.value);
    console.log(endpoint);

    const options = {
      method: "GET",
      headers: {
        "X-RapidAPI-Key": "baef7285e6msh0aae02b3fd1dde5p1d01aajsne4c06de3d63f",
        "X-RapidAPI-Host": "spotify81.p.rapidapi.com",
      },
    };

    fetch(
      "https://spotify81.p.rapidapi.com/search?q=" +
        {endpoint} +
        "&type=albums&offset=0&limit=10&numberOfTopResults=5",
      options
    )
      .then((response) => response.json())
      .then((response) => console.log(response))
      .catch((err) => console.error(err));
  }
  return (
    <input
      className="input"
      value={endpoint}
      placeholder="  Search"
      onChange={searchChange}
    />
  );
}

Hi, welcome to SA! Is it possible "object" is a word in the name property? — Asplund, Mar 06 '23 at 16:03
Please use [code formatting](https://stackoverflow.com/help/formatting). What do you mean by _getting interpreted as word 'object' rather than text_. Are you getting the correct value from the `e.target.value` when checking the console.log? — RubenSmn, Mar 06 '23 at 16:33
@RubenSmn Yes I am getting the correct value while console logging. But I am not getting the result of the query I searched for instead I am getting result of word 'object'. So I think jsx is just interpreting my words as object instead of word itself — Stucked_sucks, Mar 07 '23 at 06:58

score 0 · Answer 1 · answered Mar 06 '23 at 16:25

0

Your code is properly formated, but I noticed that how you build the url is probably incorrect.

Right now I look like you always send q={endpoint} as a string and no the variable.

Try to change your fetch to this using string interpolation:

fetch(`https://spotify81.p.rapidapi.com/search?q=${endpoint}&type=albums&offset=0&limit=10&numberOfTopResults=5`,
options)

answered Mar 06 '23 at 16:25

Disco

1,304
1
6
12

Thanks but that only works if I have Harmony installed with React – Stucked_sucks Mar 07 '23 at 07:00

score 0 · Accepted Answer · answered Mar 07 '23 at 08:43

When building your fetch URL you add +{endpoint}+ which will result in a string with a q of [object Object]

"https://spotify81.p.rapidapi.com/search?q=[object Object]&type=albums&offset=0&limit=10&numberOfTopResults=5";

The correct way to concatenate the fetch URL is the following, by removing the brackets {}

"https://spotify81.p.rapidapi.com/search?q=" +
  endpoint +
  "&type=albums&offset=0&limit=10&numberOfTopResults=5";

Now this will fetch your endpoint but it will be one step (character) behind since setState is sort of async meaning your endpoint value inside the searchChange function will not get updated until the next render. You can fix this by directly using the e.target.value inside your URL.

"https://spotify81.p.rapidapi.com/search?q=" +
  e.target.value +
  "&type=albums&offset=0&limit=10&numberOfTopResults=5";

Or using a useEffect for when the endpoint value changes

useEffect(() => {
  fetch(
    "https://spotify81.p.rapidapi.com/search?q=" +
      endpoint +
      "&type=albums&offset=0&limit=10&numberOfTopResults=5",
    options
  )
    .then((response) => response.json())
    .then((response) => console.log(response))
    .catch((err) => console.error(err));
}, [endpoint]);

This way you can use the endpoint value in your fetch.

The rendered input is acting as object rather than string in React

2 Answers2