Empty array on React state - ruby-on-rails

Question

I'm using a backend on ruby-on-rails, when my API calls for 'transactions' it returns a JSON, which works fine when tested via insomnia, but my mapping does not work. Here's my react page:
interface Transaction {
id: number;
title: string;
transaction_type: string;
description: string;
value: number;
}
const Index: React.FC = () => {
const [transactions, setTransactions] = useState<Transaction[]>([]);
useEffect(() => {
api.get('transactions').then((response) => {
setTransactions(response.data);
// console.log(response.data, transactions)
});
}, []);
return (
<React.Fragment>
<h1>Transactions</h1>
{transactions.map((transaction) => {
<div>{transaction.title}</div>;
})}
</React.Fragment>
);
};
export default Index;
On the backend side its simply returns a JSON with my database result:
#transactions_controller.rb
def index
render json: #transactions = Transaction.all
end
My routes are pointing to path: '/api/'.
When the console.log shows the response.data it is correct, but when showing the transactions state its empty.

Answer 1

You are missing the return in the map.
{transactions.map(transaction => {
return (<div>{transaction.title}</div>)
})}
Or you can remove the curly braces { from you map and it will return imlicitly.
{transactions.map(transaction => <div>{transaction.title}</div> )}

Answer 2

setState() does not always immediately update the component. It may
batch or defer the update until later. This makes reading this.state
right after calling setState() a potential pitfall.
https://reactjs.org/docs/react-component.html#setstate
That's why your console.log doesn't work, and as pointed in a previous answer you're missing the return in the map that's why you are probably not seeing results in the screen

Answer 3

That is because ajax calls are asynchronous, so by the time the component accesses the transactions, it will still be an empty array, best way will be to check if the transactions have been loaded before
using the snippet below solves the issue
interface Transaction {
id: number;
title: string;
transaction_type: string;
description: string;
value: number;
}
const Index : React.FC = () => {
const [transactions, setTransactions] = useState<Transaction[]>([]);
useEffect(() => {
api.get('transactions').then(response => {
setTransactions(response.data);
// console.log(response.data, transactions)
});
}, []);
return (
<React.Fragment>
<h1>Transactions</h1>
{transactions.length && transactions.map(transaction =>
<div>{transaction.title}</div>
)}
</React.Fragment>
);
}
export default Index
NB: transactions.length act as a boolean flag which returns false if it is 0