Question 73580 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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

1

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

2

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}
    />
  );
}
Tags:

2

Answers


  1. 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)
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search