A busca por reação retorna um valor vazio - javascript, reactjs, promessa, valor, jsx

Estou tentando obter dados json de uma API usando react e insira-o em uma página html. Aqui está a função:

function GetApiContent() {
let value = fetch(api2)
.then(response => response.json())
.then(results => {
console.log(results.title)

return {
title: results.title,
date: results.date,
hdurl: results.hdurl,
explanation: results.explanation,
}
})
.catch(err => {
console.log(err)
})

return (
<div>
<h3>{value.title}</h3>
</div>
)
}

class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Api test</h1>
<Hola message="hello" />
</header>

<GetApiContent />
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
)
}
}

O log do console funciona e retorna o título, mas quando eu o retorno na função, ele mostra a tag h3 esvaziar na página da web.

Respostas:

fetch é uma operação assíncrona, baseada em Promise, e não retorna valor imediatamente. Retorna Promise. É por isso que seu código não está funcionando. Você está basicamente tentando exibir Promise value propriedade que não é o que você deseja. Você deseja aguardar a promessa da resolução (em outras palavras: para buscar concluir a solicitação e resolver a resposta). Você pode fazê-lo dessa maneira para exibir o valor da sua API:

const getApiContent = () => fetch(api2).then(response => response.json())

class App extends Component {
state = {
title: ""
}

componentDidMount() {
getApiContent()
.then(result => this.setState({ title: result.title }))
.catch(err => console.log(err))
}

render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Api test</h1>
<Hola message="hello" />
</header>
{!!this.state.title && (
<div>
<h3>{this.state.title}</h3>
</div>
)}
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
)
}
}

lukaleli está certo. Você deve se familiarizar com Promessas.

Outra opção para você seria usar async E await:

async function GetApiContent() {
let value = await fetch(api2)
...