fix: each item should have a unique key prop

apps/web/src/components/dialogs/add-notebook-dialog.js

@@ -15,7 +15,7 @@ class AddNotebookDialog extends React.Component {
   id = undefined;
   state = {
     topics: [""],
-    focusedInputIndex: 0
+    focusedInputIndex: 0,
   };
 
   performActionOnTopic(index) {
@@ -56,7 +56,7 @@ class AddNotebookDialog extends React.Component {
     if (!this.props.notebook) return;
     const { title, description, id, topics } = this.props.notebook;
     this.setState({
-      topics: topics.map(topic => topic.title)
+      topics: topics.map((topic) => topic.title),
     });
     this.title = title;
     this.description = description;
@@ -72,7 +72,7 @@ class AddNotebookDialog extends React.Component {
     this.id = undefined;
     this.setState({
       topics: [""],
-      focusedInputIndex: 0
+      focusedInputIndex: 0,
     });
   }
 
@@ -90,9 +90,9 @@ class AddNotebookDialog extends React.Component {
               title: this.title,
               description: this.description,
               topics: this.topics,
-              id: this.id
+              id: this.id,
             });
-          }
+          },
         }}
         negativeButton={{ text: "Cancel", onClick: props.close }}
       >
@@ -100,14 +100,14 @@ class AddNotebookDialog extends React.Component {
           <Input
             autoFocus
             variant="default"
-            onChange={e => (this.title = e.target.value)}
+            onChange={(e) => (this.title = e.target.value)}
             placeholder="Enter name"
             defaultValue={this.title}
           />
           <Input
             variant="default"
             sx={{ marginTop: 1 }}
-            onChange={e => (this.description = e.target.value)}
+            onChange={(e) => (this.description = e.target.value)}
             placeholder="Enter description (optional)"
             defaultValue={this.description}
           />
@@ -118,31 +118,27 @@ class AddNotebookDialog extends React.Component {
             sx={{
               maxHeight: this.MAX_AVAILABLE_HEIGHT,
               overflowY: "auto",
-              marginBottom: 1
+              marginBottom: 1,
             }}
           >
             {this.state.topics.map((value, index) => (
-              <Flex
-                key={index.toString()}
-                flexDirection="row"
-                sx={{ marginBottom: 1 }}
-              >
+              <Flex key={value} flexDirection="row" sx={{ marginBottom: 1 }}>
                 <Input
-                  ref={ref => {
+                  ref={(ref) => {
                     this._inputRefs[index] = ref;
                     if (ref) ref.value = value; // set default value
                   }}
                   variant="default"
                   placeholder="Topic name"
-                  onFocus={e => {
+                  onFocus={(e) => {
                     this.lastLength = e.nativeEvent.target.value.length;
                     if (this.state.focusedInputIndex === index) return;
                     this.setState({ focusedInputIndex: index });
                   }}
-                  onChange={e => {
+                  onChange={(e) => {
                     this.topics[index] = e.target.value;
                   }}
-                  onKeyUp={e => {
+                  onKeyUp={(e) => {
                     if (e.nativeEvent.key === "Enter") {
                       this.addTopic(index);
                     } else if (
@@ -180,12 +176,12 @@ class AddNotebookDialog extends React.Component {
 }
 
 export function showEditNoteDialog(notebook) {
-  return showDialog(perform => (
+  return showDialog((perform) => (
     <AddNotebookDialog
       isOpen={true}
       notebook={notebook}
       edit={true}
-      onDone={async nb => {
+      onDone={async (nb) => {
         await store.add(nb);
         perform(false);
       }}

apps/web/src/components/placeholders/favorites-placeholder.js

@@ -12,7 +12,7 @@ function FavoritesPlaceholder() {
           position: "relative",
           height: "100px",
           alignSelf: "center",
-          flexDirection: "row"
+          flexDirection: "row",
         }}
       >
         {[
@@ -22,25 +22,26 @@ function FavoritesPlaceholder() {
           { delay: 10, marginTop: "0px", size: 30 },
           { delay: 7, marginTop: "-30px", size: 25 },
           { delay: 2, marginTop: "20px", size: 25 },
-          { delay: 4, marginTop: "10px", size: 25 }
-        ].map(item => (
+          { delay: 4, marginTop: "10px", size: 25 },
+        ].map((item) => (
           <motion.div
+            key={item.delay}
             style={{
               padding: 0,
               margin: 0,
               marginTop: item.marginTop,
-              position: "relative"
+              position: "relative",
             }}
             animate={{
               opacity: [0.1, 0.5, 1, 0.5, 0],
               scaleX: [0.7, 0.75, 0.85, 0.9, 1],
-              scaleY: [0.7, 0.75, 0.85, 0.9, 1]
+              scaleY: [0.7, 0.75, 0.85, 0.9, 1],
             }}
             transition={{
               duration: 7,
               ease: "linear",
               delay: item.delay,
-              loop: Infinity
+              loop: Infinity,
             }}
           >
             <Icon.Star color="favorite" size={item.size} />
@@ -54,7 +55,7 @@ function FavoritesPlaceholder() {
         alignSelf="center"
         sx={{
           textAlign: "center",
-          fontSize: "title"
+          fontSize: "title",
         }}
       >
         Notes you favorite appear here.

apps/web/src/components/placeholders/notebooks-placeholder.js

@@ -8,14 +8,15 @@ const descriptions = [
   "Thoughts & Stuff",
   "Ugh. Can't handle it anymore.",
   "Have to organize all this :(",
-  "What the heck!"
+  "What the heck!",
 ];
 function NotebooksPlaceholder() {
   return (
     <Placeholder
       items={[0, 1]}
-      renderItem={item => (
+      renderItem={(item) => (
         <Flex
+          key={"notebook" + item}
           mt={-80 * item}
           ml={80 * item}
           opacity={!item ? 0.7 : 1}
@@ -24,7 +25,7 @@ function NotebooksPlaceholder() {
             zIndex: item,
             bg: "hover",
             borderRadius: "default",
-            boxShadow: "2px 2px 7px 0px #00000040"
+            boxShadow: "2px 2px 7px 0px #00000040",
           }}
         >
           <Flex
@@ -34,7 +35,7 @@ function NotebooksPlaceholder() {
             width={120}
             sx={{
               borderRadius: "default",
-              boxShadow: "1px 1px 5px 0px #00000060"
+              boxShadow: "1px 1px 5px 0px #00000060",
             }}
           >
             <Box m={3} height={10} width={"100%"} bg="primary" />

apps/web/src/components/placeholders/notesplacholder.js

@@ -14,6 +14,7 @@ function NotesPlaceholder() {
         const Icon = icons[index];
         return (
           <Flex
+            key={"note-" + index}
             width="55%"
             bg="bgSecondary"
             opacity={0.9}
@@ -21,7 +22,7 @@ function NotesPlaceholder() {
             ml={-40 + index * 60}
             sx={{
               boxShadow: "2px 2px 7px 0px #00000040",
-              borderRadius: "default"
+              borderRadius: "default",
             }}
           >
             <Flex flex="0.06 1 auto" bg="primary" sx={{ borderRadius: 25 }} />
@@ -33,8 +34,9 @@ function NotesPlaceholder() {
                 <Icon size={20} color="dimPrimary" />
               </Flex>
               <Flex flexDirection="column">
-                {lines.map(() => (
+                {lines.map((_, index) => (
                   <Box
+                    key={index}
                     width={"100%"}
                     py={"4px"}
                     mr={1}

apps/web/src/components/placeholders/tags-placeholder.js

@@ -15,7 +15,7 @@ const tags = [
   "essays",
   "disasters",
   "todolists",
-  "myschoolwork"
+  "myschoolwork",
 ];
 
 function TagsPlaceholder() {
@@ -24,13 +24,14 @@ function TagsPlaceholder() {
       items={[0]}
       renderItem={() => (
         <Flex
+          key="tagplaceholder"
           width={"80%"}
           opacity={0.9}
           alignItems="center"
           justifyContent="center"
           p={2}
           sx={{
-            borderRadius: "default"
+            borderRadius: "default",
           }}
         >
           <Text fontSize={40} color="primary">
@@ -67,12 +68,12 @@ async function animate(controls, setTag) {
   await controls.start({
     opacity: 0,
     y: 50,
-    transition: { delay: 1, duration: 0.4 }
+    transition: { delay: 1, duration: 0.4 },
   });
   await controls.start({
     opacity: 0,
     y: -50,
-    transition: { duration: 0 }
+    transition: { duration: 0 },
   });
   setTag(getRandomTag());
   await animate(controls, setTag);

apps/web/src/components/properties/index.js

@@ -96,9 +96,10 @@ function Properties() {
               </Text>
             </Text>
             <Flex mb={1}>
-              {tools.map((tool) => (
+              {tools.map((tool, _) => (
                 <Toggle
                   {...tool}
+                  key={tool.key}
                   toggleKey={tool.key}
                   onToggle={(state) => changeState(tool.key, state)}
                 />

apps/web/src/views/Settings.js

@@ -68,7 +68,11 @@ function Settings(props) {
           }}
         >
           {accents.map((color) => (
-            <AccentItem code={color.code} label={color.label} />
+            <AccentItem
+              key={color.code}
+              code={color.code}
+              label={color.label}
+            />
           ))}
         </Flex>
         <Flex
@@ -88,6 +92,7 @@ function Settings(props) {
       </Text>
       {["Terms of Service", "Privacy Policy", "About"].map((title) => (
         <Button
+          key={title}
           variant="list"
           onClick={() =>
             props.navigator.navigate("TOS", {