How to add a state into a api fetch() - json

Question

Hi I need to add a state into my API fetch but struggling to see why it works when the state is an empty string but does not work if there is a string inside the state please view the examples
The idea is the user enters new text in an input which updates the state Search and then updates fetch url so they can search the database
Example Working Code (Notice the state Search is empty)
export default class ThirdScreen extends React.Component {
state = {
search: '',
image: ''
}
componentDidMount() {
this.fetchsa();
}
fetchsa = () => {
const {search} = this.state;
fetch(`https://xxx/search?q=moon&media_type=image`)
.then((response) => response.json())
.then((result) => this.setState({
image: result.collection.items[0].links[0].href
}))
}
Example not working Code
export default class ThirdScreen extends React.Component {
state = {
search: 'moon', //Notice this is not empty and now causes an error
image: ''
}
componentDidMount() {
this.fetchsa();
}
fetchsa = () => {
const {search} = this.state;
fetch(`https://xxx/search?q='${search}'&media_type=image`)
.then((response) => response.json())
.then((result) => this.setState({
image: result.collection.items[0].links[0].href
}))
}

Answer 1

The problem are the single quotes in your fetch URL:
const search = 'moon';
fetch(`https://xxx/search?q='${search}'&media_type=image`)
is NOT the same as
fetch(`https://xxx/search?q=moon&media_type=image`)
The API request goes through for 'moon' instead of moon and no results are found.
However this is ok:
fetch(`https://xxx/search?q=${search}&media_type=image`)
So:
Lose the single quotes around ${search}.
Handle an empty items array when no results are found.
For example:
fetch(`https://xxx/search?q=${search}&media_type=image`)
.then((response) => response.json())
.then((result) => result.collection.items.length > 0 && this.setState({
image: result.collection.items[0].links[0].href
}))

Answer 2

Try this:
export default class ThirdScreen extends React.Component {
state = {
search: 'moon', //Notice this is not empty and now causes an error
image: ''
}
componentDidMount() {
this.fetchsa();
}
fetchsa = () => {
const {search} = this.state;
fetch(`https://xxx/search?q='${search}'&media_type=image`)
.then((response) => response.json())
.then((result) => this.setState({
result.collection && result.collection.items[0] && result.collection.items[0].links[0] ?image: result.collection.items[0].links[0].href:null
}))
}