Fix rating style and refactor useEffect to useMemo

Author: TheZoker

src/App.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useState, useEffect } from 'react';
+import { Fragment, useState, useMemo } from 'react';
 import { JsonForms } from '@jsonforms/react';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
@@ -57,15 +57,11 @@ const renderers = [
 
 const App = () => {
   const classes = useStyles();
-  const [displayDataAsString, setDisplayDataAsString] = useState('');
-  const [jsonformsData, setJsonformsData] = useState<any>(initialData);
-
-  useEffect(() => {
-    setDisplayDataAsString(JSON.stringify(jsonformsData, null, 2));
-  }, [jsonformsData]);
+  const [data, setData] = useState<any>(initialData);
+  const stringifiedData = useMemo(() => JSON.stringify(data, null, 2), [data]);
 
   const clearData = () => {
-    setJsonformsData({});
+    setData({});
   };
 
   return (
@@ -89,7 +85,7 @@ const App = () => {
             Bound data
           </Typography>
           <div className={classes.dataContent}>
-            <pre id='boundData'>{displayDataAsString}</pre>
+            <pre id='boundData'>{stringifiedData}</pre>
           </div>
           <Button
             className={classes.resetButton}
@@ -108,10 +104,10 @@ const App = () => {
             <JsonForms
               schema={schema}
               uischema={uischema}
-              data={jsonformsData}
+              data={data}
               renderers={renderers}
               cells={materialCells}
-              onChange={({ errors, data }) => setJsonformsData(data)}
+              onChange={({ errors, data }) => setData(data)}
             />
           </div>
         </Grid>

src/Rating.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useState } from 'react';
+import { InputLabel } from '@mui/material';
 
 interface RatingProps {
   id?: string;
@@ -12,8 +13,8 @@ export const Rating: React.FC<RatingProps> = ({ id, value, updateValue }) => {
 
   return (
     <div id='#/properties/rating' className='rating'>
-      <p>Rating:</p>
-      <span style={{ cursor: 'pointer' }}>
+      <InputLabel shrink style={{ marginTop: '0.8em' }}>Rating</InputLabel>
+      <div style={{ cursor: 'pointer', fontSize: '18px' }}>
         {[0, 1, 2, 3, 4].map((i) => {
           const fullStars = hoverAt ?? value;
 
@@ -28,7 +29,7 @@ export const Rating: React.FC<RatingProps> = ({ id, value, updateValue }) => {
             </span>
           );
         })}
-      </span>
+      </div>
     </div>
   );
 };