2.3.9 Nested Views Codehs [repack] Guide

// Child 3: Follow Button Background var followButton = new Rectangle(80, 30); followButton.setPosition(60, 150); followButton.setColor("green");

function ListView(items) const container = createDiv('list'); items.forEach(it => const row = RowView(it, selected => console.log('selected', selected)); container.appendChild(row); ); return container;

If child views are bleeding out of their containers, add padding to the parent view or adjust the flex values of the children to distribute space evenly. 2.3.9 nested views codehs

A occurs when you place one component inside another component.

import React, Component from 'react'; import View, Text, StyleSheet from 'react-native'; // Child 3: Follow Button Background var followButton

// Create the main view var mainView = new View(0, 0, 400, 400);

Make sure you read the instructions carefully regarding background colors and text strings. If CodeHS asks for a specific color code (like #ff0000 or red ) or specific text labels inside the components, the autograder will flag mismatches as incorrect, even if your layout structure is technically perfect. Best Practices for Clean Layout Code If CodeHS asks for a specific color code

By nesting views, you gain precise control over your layout. It allows you to:

Always make sure every open tag has a matching closing tag. Indent your nested tags so you can visually trace which child belongs to which parent.