Parent-Child Component Communication

This example demonstrates communication between parent and child components.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

function ParentComponent() {
  const [message, setMessage] = useState('Hello from Parent!');

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent message={message} />
      <button onClick={() => setMessage('Message Updated!')}>Update Message</button>
    </div>
  );
}

function ChildComponent({ message }) {
  return <h2>Child Component: {message}</h2>;
}

ReactDOM.render(<ParentComponent />, document.getElementById('root'));