React Nested Components Cheat Sheet

Basic Example

function Parent() {
  return (
    <div>
      <h1>Parent</h1>
      <Child />
    </div>
  );
}

function Child() {
  return <p>I am the Child component</p>;
}

Passing Props to Children

function Parent() {
  return <Child message="Hello from Parent!" />;
}

function Child({ message }) {
  return <p>{message}</p>;
}

Nesting Multiple Components

function Dashboard() {
  return (
    <div>
      <Header />
      <Sidebar />
      <MainContent />
    </div>
  );
}

Children Prop (Component Composition)

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h2>Title</h2>
      <p>Description here</p>
    </Card>
  );
}

Reusing Nested Components

function List({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <ListItem key={item.id} text={item.text} />
      ))}
    </ul>
  );
}

function ListItem({ text }) {
  return <li>{text}</li>;
}

Using State & Props Together

function Parent() {
  const [count, setCount] = useState(0);
  return <Child count={count} increment={() => setCount(count + 1)} />;
}

function Child({ count, increment }) {
  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Add</button>
    </div>
  );
}