So I’m trying to change an object parameter that is being called by .map inside a curly braces. Here is the code:
import React, { useEffect, useState } from 'react'
function App() {
const [news, setNews] = useState([])
const [searchQuery, setSearchQuery] = useState('city')
const getNews = () => {
fetch('https://api.randomuser.me/?nat=USA&results=5')
.then(result => result.json())
.then(data => setNews(data.results))
.then(error => console.log(error))
}
const handSearch = (e) => {
setSearchQuery(e.target.value)
}
//the [] at the end is enabled to request data only onces
useEffect(() => {
getNews()
}, [searchQuery])
return (
<div>
<form>
<input onChange={handSearch}></input>
</form>
<p><b>Available Input: </b>city, state, country, postcode</p>
<hr/>
{
news.map((value, index) => (
<p key={index}>{`value.location.${searchQuery}`}</p>
))
}
<p>{searchQuery}</p>
</div>
);
}
export default App;
But it doesn’t work, it only return a string. I’ve tried to :
- Remove the Apostrophe
`` - Change the curly braces to another brackets
[] - Make a const outside
return()just for value.location.${searchQuery} and put it back to the curly braces - Some other small changes I kinda forgot
How to complete an object parameter by ${}?
Any help would be appreciated, thanks before!
