Updated State not being retrieved by method - reactjs

Question

In this file, I'm pulling in a bunch of data from an API and assigning it to the array of "baseData". In another file, I have an onkeyup event calling the generateResults method. But then generateResults method is only getting the original, blank state of the array. I'm new to react so any help is appreciated. Thanks!
import React from 'react';
import axios from 'axios';
export class LINKS extends React.Component{
constructor(props){
super(props);
this.state={
baseData: []
}}
getBaseData(){
axios.get("http://localhost:3000/api/links")
.then(response => {
this.setState({baseData: response.data});
}).catch((error) => {
console.error(error);
});
}
componentDidMount(){
this.getBaseData();
}
generateResults(){
var linkInfo = this.state.baseData
var searchBar = document.getElementById('searchBar')
console.log(linkInfo)
for(var i = 0; i < linkInfo.length; i ++){
}
}
render(){
var linkInfo = this.state.baseData
// console.log(linkInfo)
if(linkInfo.length === 0){
return(
<div><h1> Loading... </h1></div>)
} else {
return(
<div>{linkInfo.map((info, i) =>
<div>
<u>{info['client']}</u>
{info.links.map((link, i) =>
<div> {link.linkTitle}
<br/> {link.url} </div>) }
<hr/></div>
)}</div>
)
}
}
}
Method in the other class calling the generateResults method.
handleSearch(){
let links = new LINKS
links.generateResults()
}

Answer 1

Because you should return any HTML into your arrow function map loop with double Parentheses like this :
<ul>
{
this.props.items.map((item) => (
<li>{item}</li>
))
}
</ul>
I've edited your code, try this :
<div>
{
linkInfo.map((info, i) => (
<div>
<u>{info['client']}</u>
{
info.links.map((link, i) => (
<div> {link.linkTitle}
<br/> {link.url} </div>
))
}
<hr/></div>
))
}
</div>