Array not displaying in twig template

Question

Custom twig template is just this:

<ul id="rows">
  {% for product in products %}
    <li>{{ product.title }} <a href="{{ product.image }}">Image</a> {{ product.description }}</li>
  {% endfor %}
</ul>

My custom module sends an array of products, which are something like this

array(1) { [0]=> array(3) { ["title"]=> string(9) "Product 3" ["image"]=> string(56) "/sites/default/files/2019-11/128px-Small_Storage_Box.png" ["description"]=> string(22) "Description 3" } }

And I am sending it from a controller like this:

return array(
  '#title' => t('Return products list'),
  '#products' => $products,
  '#theme' => 'return-products',
);

In my .module file I've defined hook as:

<?php
function return_products_theme($existing, $type, $theme, $path) {
  return array(
    'products' => [
      'variables' => [],
    ]);
}

I know data is there in an array, it just doesn't go inside twig template. Even if I type some

Test it won't be shown.

Answer 1

Several things are wrong here.

Your hook_theme must return:

return [
  'return_products' => [
    'variables' => [
      'products' => NULL,
    ]
  ]
];

Now you have a template called return_products with a variable called products.

In your controller you must then use '#theme' => 'return_products', instead of '#theme' => 'return-products',.

Then create a template in mymodule/templates/return-products.html.twig.

Notice how your theme name must be with _(underscores) when referred to in PHP, but the file name must be with -(dashes).