React computer properties based on state items.

App.jsx

import React, {
  useEffect,
  useState,
} from "react";

const App = () => {
  const [errs, setErrs] = useState([]);

  /**
   * Helper which just appends the e to errs.
   */
  const showErr = (e) => {
    const newErrs = [...errs, e];
    
    console.log("in showErr, errs=", errs, "newErrs=", newErrs);
    
    setErrs(newErrs);
  };

  useEffect(() => {
    showErr("this is the first error");
    showErr("this is the second error");
  }, []);
  
  return (
    <>
      <div>header</div>
      {errs.map((e, i) => {
        return (
          <div key={i}>
            Error: {e}
          </div>
        );
      })}
      <div>content</div>
      <div>footer</div>
    </>
  );
};

export default App;