How to use React.js Fetching API - reactjs

Question

I'm learning React and practicing how to use 'fetch' in React.
I have successfully fetched some API. I listed some random content out of this API, such as 'Title', 'Author' and 'Points'. However, I noted that some don't have the 'Title'. I don't like those that don't have 'Title'(leaving it blank). I'd like to automatically add 'A/N' in those lists that don't have the 'Title'.
Does anybody can teach me how to do that?
Here is my code:
import React, { Component } from 'react';
import './App.css';
class App extends Component{
constructor(){
super();
this.state={
hits: [],
isLoading: false,
error: null,
}
}
componentDidMount(){
this.setState({
isLoading: true
})
fetch('https://hn.algolia.com/api/v1/search?query=')
.then(response => {
if(response.ok){
return response.json()
}else{
throw new Error('Something went wrong...')
}
})
.then(data => this.setState({
hits: data.hits,
isLoading: false
}))
.catch(error => this.setState({
error: null,
isLoading: false
}))
}
render(){
const {hits, isLoading, error} = this.state;
if(isLoading){
return <p>Loading ... </p>
}
if(error){
return <p>{error.message}</p>
}
return(
<div className="container">
{hits.map(data =>
<ul key={data.objectID}>
<li><a href={data.url}>Title: {data.title}</a></li>
<li>Author:{data.author}</li>
<li>Points: {data.points}</li>
</ul>
)}
</div>
)
}
}
export default App

Answer 1

You can make use of !! operator to achieve this
Here is you code
import React, { Component } from 'react';
import './App.css';
class App extends Component{
constructor(){
super();
this.state={
hits: [],
isLoading: false,
error: null,
}
}
componentDidMount(){
this.setState({
isLoading: true
})
fetch('https://hn.algolia.com/api/v1/search?query=')
.then(response => {
if(response.ok){
return response.json()
}else{
throw new Error('Something went wrong...')
}
})
.then(data => this.setState({
hits: data.hits,
isLoading: false
}))
.catch(error => this.setState({
error: null,
isLoading: false
}))
}
render(){
const {hits, isLoading, error} = this.state;
if(isLoading){
return <p>Loading ... </p>
}
if(error){
return <p>{error.message}</p>
}
return(
<div className="container">
{hits.map(data =>
<ul key={data.objectID}>
<li><a href={data.url}>Title: {!!data.title ? data.title : "A/N" }</a></li>
<li>Author:{data.author}</li>
<li>Points: {data.points}</li>
</ul>
)}
</div>
)
}
}
export default App
ALternative way to achieve this
Set const default_title to 'n/a'; and use in render function.

Answer 2

You can use map() and save data like this:
fetch('https://hn.algolia.com/api/v1/search?query=')
.then(response => {
if(response.ok){
return response.json()
}else{
throw new Error('Something went wrong...')
}
})
.then(data => this.setState({
hits: data.hits.map( item => {
if(!item.Title){
item.Title = 'A/N';
}
return item;
}),
isLoading: false
}))
.catch(error => this.setState({
error: null,
isLoading: false
}))