How to display value got from API into ReactJS page - reactjs

Question

let resultofapi is declared globally and I initialized it with the value I received from API. I want to display that value to my react js page (inside a table). When I print the value inside the API it returns me output {"similarity_score":0.9999999404}.but when I access it outside the API, it gives me value=undefine
pd.usage()
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
**pd.semantic(
pd
.semantic(textarea1, textarea2)//these are forms data
.then(response => {
console.log(response); //output={"similarity_score":0.670276463}
*resultofapi = response;* //output=resultofapi={"similarity_score":0.670276463}*
})**
.catch(error => {
console.log(error);
})
)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
console.log(resultofapi)//output=undefined

Answer 1

Make a state object and setState it with the API Data. From that you can access it allover your class.
this.state = {
items: []
};
componentDidMount() {
fetch("https://url.url.com")
.then(res => res.json())
.then(
(result) => {
this.setState({
items: result.items
});
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
return (
<ul>
{items.map(item => (
<li key={item.name}>
{item.name} {item.price}
</li>
))}
</ul>
);