Empty array on React state

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> )}