adityatyagi

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>

adityatyagi

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>
  );

adityatyagi

<div>
  <h1>Hello there</h1>
  {/* Only this is rendered in the real DOM */}
  <p>This is a new para rendering on a condition</p>
</div>

adityatyagi

{/* consider this as a original state of the DOM */}
<div>
  <h1>Hello there</h1>
</div>

adityatyagi

import React from "react";

const Demo = (props) => {
  return <p>{props.show ? "This is new" : ""}</p>;
};

export default Demo

adityatyagi

className={`${!isValid ? styles.invalid : ""}`} // className for StyledInput

adityatyagi

<button type="submit" className={styles.button}>Submit</button>

adityatyagi

// import
import styles from "./style.module.css";

adityatyagi

const StyledButton = styled.button`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: #000;
  color: white;
  border: 2px solid white;

adityatyagi

const StyledInput = styled.input`
  border: 1px solid ${(props) => (props.invalid ? "red" : "black")};
  background-color: ${(props) => (props.invalid ? "#ffcfcf" : "")};
`;