Update state/states example to use children! macro (#18250)

# Objective

Contributes to #18238 
Updates the `state/states` example to use the `children!` macro. Note
that this example also requires `--features bevy_dev_tools`

## Solution

Updates examples to use the Improved Spawning API merged in
https://github.com/bevyengine/bevy/pull/17521

## Testing

- Did you test these changes? If so, how?
- Opened the examples before and after and verified the same behavior
was observed. I did this on Ubuntu 24.04.2 LTS using `--features
wayland`.
- Are there any parts that need more testing?
- Other OS's and features can't hurt, but this is such a small change it
shouldn't be a problem.
- How can other people (reviewers) test your changes? Is there anything
specific they need to know?
  - Run the examples yourself with and without these changes.
- If relevant, what platforms did you test these changes on, and are
there any important ones you can't test?
  - see above

---

## Showcase

n/a

## Migration Guide

n/a

examples/state/states.rs

@@ -51,40 +51,37 @@ fn setup(mut commands: Commands) {
 
 fn setup_menu(mut commands: Commands) {
     let button_entity = commands
-        .spawn(Node {
+        .spawn((
-            // center button
+            Node {
-            width: Val::Percent(100.),
+                // center button
-            height: Val::Percent(100.),
+                width: Val::Percent(100.),
-            justify_content: JustifyContent::Center,
+                height: Val::Percent(100.),
-            align_items: AlignItems::Center,
+                justify_content: JustifyContent::Center,
-            ..default()
+                align_items: AlignItems::Center,
-        })
+                ..default()
-        .with_children(|parent| {
+            },
-            parent
+            children![(
-                .spawn((
+                Button,
-                    Button,
+                Node {
-                    Node {
+                    width: Val::Px(150.),
-                        width: Val::Px(150.),
+                    height: Val::Px(65.),
-                        height: Val::Px(65.),
+                    // horizontally center child text
-                        // horizontally center child text
+                    justify_content: JustifyContent::Center,
-                        justify_content: JustifyContent::Center,
+                    // vertically center child text
-                        // vertically center child text
+                    align_items: AlignItems::Center,
-                        align_items: AlignItems::Center,
+                    ..default()
+                },
+                BackgroundColor(NORMAL_BUTTON),
+                children![(
+                    Text::new("Play"),
+                    TextFont {
+                        font_size: 33.0,
                         ..default()
                     },
-                    BackgroundColor(NORMAL_BUTTON),
+                    TextColor(Color::srgb(0.9, 0.9, 0.9)),
-                ))
+                )],
-                .with_children(|parent| {
+            )],
-                    parent.spawn((
+        ))
-                        Text::new("Play"),
-                        TextFont {
-                            font_size: 33.0,
-                            ..default()
-                        },
-                        TextColor(Color::srgb(0.9, 0.9, 0.9)),
-                    ));
-                });
-        })
         .id();
     commands.insert_resource(MenuData { button_entity });
 }