Nested Elements with Siblings

This example demonstrates how to create a hierarchy of nested React elements, including sibling elements at the same level.

import React from "react";
import ReactDOM from "react-dom";

// Creating nested elements with multiple children
const Parent = React.createElement("div", { 
  id: "parent",
  className: "container",
  style: { padding: "20px", backgroundColor: "#f0f0f0" }
}, 
React.createElement("div", { 
  id: "child",
  style: { border: "1px solid #ccc" }
}, [
  React.createElement("h1", { 
    className: "title",
    style: { color: "blue" }
  }, "First Heading"),
  React.createElement("h1", { 
    className: "title",
    style: { color: "green" }
  }, "Second Heading"),
  React.createElement("p", { 
    className: "description"
  }, "This is a paragraph sibling")
])
);

// Alternative with more complex nesting
const ComplexParent = React.createElement("section", { 
  className: "complex-container"
}, [
  React.createElement("header", {}, "Header Content"),
  Parent,
  React.createElement("footer", {}, "Footer Content")
]);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<ComplexParent />);

This code showcases how React handles element nesting and sibling relationships:

  • A parent div containing a child div
  • Multiple sibling elements (h1 tags and a p tag) within the child div
  • Styling through props at different levels
  • A more complex hierarchy with section, header, and footer

Key features demonstrated:

  1. Array of Children: Using an array to group multiple sibling elements
  2. Props Usage: Adding ids, classes, and inline styles to elements
  3. Nesting Levels: Multiple levels of element hierarchy
  4. Composition: Combining multiple elements into a single render

Practical Applications:

This structure is useful for: - Creating layouts with multiple sections - Building component trees - Organizing related content - Applying consistent styling across related elements

Note: In real-world applications, you would typically use JSX syntax or functional components instead of React.createElement for better readability and maintainability.