One-Way Data Flow with Props

Emphasize the one-way data flow by updating the parent state and passing it down to the child component as a prop.
<div id="app"></div>
This is the HTML markup with a root div where our React components will be mounted.
/* CSS styles for simplicity */
.child-component {
  padding: 10px;
  border: 1px solid black;
  margin-top: 10px;
CSS styles for the child component to visually differentiate it from the parent.
class ParentComponent extends React.Component {
  constructor(props) {
    this.state = {
      message: 'Hello from Parent!'

  updateMessage = (newMessage) => {
    this.setState({ message: newMessage });

  render() {
    return (
        <button onClick={() => this.updateMessage('Updated Hello from Parent!')}>Update Message</button>
        <ChildComponent message={this.state.message} />

const ChildComponent = (props) => (
  <div className="child-component">
The JavaScript code defines two React components. ParentComponent has a state that holds the message and a method to update it. It renders a button to update the state and the ChildComponent, passing the message as a prop. ChildComponent is a functional component that receives the message as a prop and displays it.
ReactDOM.render(<ParentComponent />, document.getElementById('app'));
This code renders the ParentComponent into the root div, thereby initializing the React application.