diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md index 108e394e2..32f81c447 100644 --- a/src/content/learn/rendering-lists.md +++ b/src/content/learn/rendering-lists.md @@ -113,9 +113,11 @@ const people = [{ name: 'Mohammad Abdus Salam', profession: 'physicist', }, { + id: 3, name: 'Percy Lavon Julian', profession: 'chemist', }, { + id: 4, name: 'Subrahmanyan Chandrasekhar', profession: 'astrophysicist', }]; diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index c2b1a9948..6f49c7656 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -435,7 +435,7 @@ interface ModalRendererProps { Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `
  • ` children. -You can see all an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA). +You can see an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA). ### Style Props {/*typing-style-props*/} @@ -456,7 +456,7 @@ We recommend the following resources: - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) is the official documentation for TypeScript, and covers most key language features. - - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) covers a each new features in-depth. + - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) cover new features in depth. - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document. diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md index 0b64c5ed9..92c6ba63a 100644 --- a/src/content/reference/react/StrictMode.md +++ b/src/content/reference/react/StrictMode.md @@ -196,6 +196,9 @@ ul { margin: 0; list-style-type: none; height: 100%; + display: flex; + flex-wrap: wrap; + padding: 10px; } li { @@ -203,7 +206,6 @@ li { border-radius: 6px; float: left; margin: 5px; - margin-bottom: 20px; padding: 5px; width: 70px; height: 100px; @@ -283,6 +285,9 @@ ul { margin: 0; list-style-type: none; height: 100%; + display: flex; + flex-wrap: wrap; + padding: 10px; } li { @@ -290,7 +295,6 @@ li { border-radius: 6px; float: left; margin: 5px; - margin-bottom: 20px; padding: 5px; width: 70px; height: 100px; @@ -377,6 +381,9 @@ ul { margin: 0; list-style-type: none; height: 100%; + display: flex; + flex-wrap: wrap; + padding: 10px; } li { @@ -384,7 +391,6 @@ li { border-radius: 6px; float: left; margin: 5px; - margin-bottom: 20px; padding: 5px; width: 70px; height: 100px; @@ -467,6 +473,9 @@ ul { margin: 0; list-style-type: none; height: 100%; + display: flex; + flex-wrap: wrap; + padding: 10px; } li { @@ -474,7 +483,6 @@ li { border-radius: 6px; float: left; margin: 5px; - margin-bottom: 20px; padding: 5px; width: 70px; height: 100px;