How use dynamic variable in react-axios?

Question

I'm trying to get data based on the search from API, with React/Axios

        process.env.REACT_APP_MARVEL_API_BASE_URL +
          'characters?nameStartWith=${query}orderBy=name' +
          '&ts=' +
          ts +
          '&apikey=' +
          process.env.REACT_APP_MARVEL_API_PUBLIC_KEY +
          '&hash=' +
          hash
      )

query - must be dynamic so with every search I must replace search value with query. it's my first react project tho.

This is the Search Component:


const Search = ({ getQuery }) => {
  const [text, setText] = useState('')

  const onChange = (q) => {
    setText(q)
    getQuery(q)
  }

  return (
    <section className="search">
      <form>
        <input
          type="text"
          className="form-control"
          placeholder="Search e.g. Ironman, Stan Lee"
          value={text}
          onChange={(e) => onChange(e.target.value)}
          autoFocus
        ></input>
      </form>
    </section>
  )
}

export default Search

this is Main Application:

import axios from 'axios'
import Header from './components/ui/Header'
import CharacterGrid from './components/characters/CharacterGrid'
import Search from './components/ui/Search'
import crypto from 'crypto'
import './App.css'

const ts = new Date().getTime
const hash = crypto
  .createHash('md5')
  .update(
    ts +
      process.env.REACT_APP_MARVEL_PRIVATE_KEY +
      process.env.REACT_APP_MARVEL_API_PUBLIC_KEY
  )
  .digest('hex')

const App = () => {
  const [items, setItems] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [query, setQuery] = useState('')

  useEffect(() => {
    const fetchItems = async () => {
      setIsLoading(true)
      const result = await axios(
        process.env.REACT_APP_MARVEL_API_BASE_URL +
          'characters?nameStartWith=${query}orderBy=name' +
          '&ts=' +
          ts +
          '&apikey=' +
          process.env.REACT_APP_MARVEL_API_PUBLIC_KEY +
          '&hash=' +
          hash
      )

      setItems(result.data)
      setIsLoading(false)
    }
    fetchItems()
  }, [query])

  return (
    <div className="container">
      <Header />
      <Search getQuery={(q) => setQuery(q)} />
      <CharacterGrid isLoading={isLoading} items={items} />
    </div>
  )
  //TODO pagination
}

export default App

but search not working, the ${query} syntax neither highlighting nor working

You can refer this - https://stackoverflow.com/questions/27678052/usage-of-the-backtick-character-in-javascript — Mayank Soni, Jul 13 '20 at 19:10
thank you it worked, I'm new in JS so I guess its rookie mistake) — ilkin, Jul 14 '20 at 18:14

score 1 · Accepted Answer · answered Jul 13 '20 at 18:57

1

It looks like you're using ' (single quote) instead of ` (grave accent) to wrap your template literals

'characters?nameStartWith=${query}orderBy=name'

should be

`characters?nameStartWith=${query}orderBy=name`

answered Jul 13 '20 at 18:57

Pavlos Karalis

2,893
1
6
14

How use dynamic variable in react-axios?

1 Answers1