App.js

import React, { useState } from "react";
import { render } from "react-dom";
// Functional component
const DemoOutput = (props) => {
  return (
    <div>
      <h3>This is demo output component and will remain static</h3>
      <p>{props.show ? "Only this will render" : ""}</p>
    </div>
  );
};
// Main App component
const App = (props) => {
  const [showPara, setShowPara] = useState(false);
  const togglePara = () => {
    setShowPara((state) => !state);
  };
  return (
    <div>
      <h2>Virtual DOM demo by Aditya Tyagi</h2>
      <DemoOutput show={showPara} />
      <button onClick={togglePara}>Toggle</button>
    </div>
  );
};
render(<App messages={data.messages} />, document.getElementById("root"));