How to nest elements in a render array

Question

So, I'm trying to generate some markup using render arrays. I need to create some nested divs. I thought that I could do this by nesting the arrays, as such:

function make_array() {
  $items = port_view_get_block();
  $array['container']['#prefix'] = '<div id = "container">';
  $array['container']['#suffix'] = '</div>';
  $array['container']['#markup'] = 'This is inside the container div';
  $array['container']['slider']['#prefix'] = '<div id = "slider">';
  $array['container']['slider']['#suffix'] = '</div>';
  $array['container']['slider']['#markup'] = 'This is inside the slider div';
  return $array;
}

This doesn't seem to work. The inner array isn't rendered.

What is the proper way to get a nested structure using render arrays?

Answer 1

If an element is given #markup, the render process stops searching for nested elements. To accomplish what you need, just create a second child element with no #prefix or #suffix.

function make_array() {
  $items = port_view_get_block();
  $array = array(
    'container' => array(
      '#prefix' => '<div id="container">',
      '#suffix' => '</div>',
      'markup' => array(
        '#markup' => 'This is inside the container div',
      ),
      'slider' => array(
        '#prefix' => '<div id="slider">',
        '#suffix' => '</div>',
        '#markup' => 'This is inside the slider div',
      ),
    ),
  );
  return $array;
}