Fix SectionList example (#286)

* Fix SectionList example * Update sectionlist.md * Update sectionlist.md
MLH-Fellowship · Apr 9, 2018 · 1b57e8b · 1b57e8b
1 parent 5de0222
commit 1b57e8b
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 26 deletions.
diff --git a/docs/sectionlist.md b/docs/sectionlist.md
@@ -19,19 +19,33 @@ A performant interface for rendering sectioned lists, supporting the most handy
 If you don't need section support and want a simpler interface, use [`<FlatList>`](flatlist.md).
 
 Simple Examples:
- // Example 1 (Homogeneous Rendering) <SectionList renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>} renderSectionHeader={({ section: { title } }) => <Text style={{ fontWeight: 'bold' }}>{title}</Text>} sections={[ { title: 'Title1', data: ['item1', 'item2'] }, { title: 'Title2', data: ['item3', 'item4'] }, { title: 'Title3', data: ['item5', 'item6'] }, ]} keyExtractor={(item, index) => item + index} />
-
-    // Example 2 (Heterogeneous Rendering / No Section Headers)
-    const overrideRenderItem = ({ item, index, section: { title, data } }) => <Text key={index}>Override{item}</Text>
-
-    <SectionList
-      renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>}
-      sections={[
-        { title: 'Title1', data: ['item1', 'item2'], renderItem: overrideRenderItem },
-        { title: 'Title2', data: ['item3', 'item4'] },
-        { title: 'Title3', data: ['item5', 'item6'] },
-      ]}
-    />
+
+```javascript
+// Example 1 (Homogeneous Rendering) 
+ <SectionList 
+  renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>} 
+  renderSectionHeader={({ section: { title } }) => <Text style={{ fontWeight: 'bold' }}>{title}</Text>} 
+  sections={[ 
+   { title: 'Title1', data: ['item1', 'item2'] }, 
+   { title: 'Title2', data: ['item3', 'item4'] }, 
+   { title: 'Title3', data: ['item5', 'item6'] }, 
+   ]} 
+  keyExtractor={(item, index) => item + index} />
+```
+
+```javascript
+// Example 2 (Heterogeneous Rendering / No Section Headers)
+const overrideRenderItem = ({ item, index, section: { title, data } }) => <Text key={index}>Override{item}</Text>
+
+<SectionList
+  renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>}
+  sections={[
+    { title: 'Title1', data: ['item1', 'item2'], renderItem: overrideRenderItem },
+    { title: 'Title2', data: ['item3', 'item4'] },
+    { title: 'Title3', data: ['item5', 'item6'] },
+  ]}
+/>
+```
 
 This is a convenience wrapper around [`<VirtualizedList>`](virtualizedlist.md), and thus inherits its props (as well as those of [`<ScrollView>`](scrollview.md) that aren't explicitly listed here, along with the following caveats:
 

diff --git a/website/versioned_docs/version-0.55/sectionlist.md b/website/versioned_docs/version-0.55/sectionlist.md
@@ -19,19 +19,34 @@ A performant interface for rendering sectioned lists, supporting the most handy
 
 If you don't need section support and want a simpler interface, use [`<FlatList>`](flatlist.md).
 
-Simple Examples: // Example 1 (Homogeneous Rendering) <SectionList renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>} renderSectionHeader={({ section: { title } }) => <Text style={{ fontWeight: 'bold' }}>{title}</Text>} sections={[ { title: 'Title1', data: ['item1', 'item2'] }, { title: 'Title2', data: ['item3', 'item4'] }, { title: 'Title3', data: ['item5', 'item6'] }, ]} keyExtractor={(item, index) => item + index} />
-
-    // Example 2 (Heterogeneous Rendering / No Section Headers)
-    const overrideRenderItem = ({ item, index, section: { title, data } }) => <Text key={index}>Override{item}</Text>
-
-    <SectionList
-      renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>}
-      sections={[
-        { title: 'Title1', data: ['item1', 'item2'], renderItem: overrideRenderItem },
-        { title: 'Title2', data: ['item3', 'item4'] },
-        { title: 'Title3', data: ['item5', 'item6'] },
-      ]}
-    />
+Simple Examples: 
+
+```javascript
+// Example 1 (Homogeneous Rendering) 
+ <SectionList 
+  renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>} 
+  renderSectionHeader={({ section: { title } }) => <Text style={{ fontWeight: 'bold' }}>{title}</Text>} 
+  sections={[ 
+   { title: 'Title1', data: ['item1', 'item2'] }, 
+   { title: 'Title2', data: ['item3', 'item4'] }, 
+   { title: 'Title3', data: ['item5', 'item6'] }, 
+   ]} 
+  keyExtractor={(item, index) => item + index} />
+```
+
+```javascript
+// Example 2 (Heterogeneous Rendering / No Section Headers)
+const overrideRenderItem = ({ item, index, section: { title, data } }) => <Text key={index}>Override{item}</Text>
+
+<SectionList
+  renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>}
+  sections={[
+    { title: 'Title1', data: ['item1', 'item2'], renderItem: overrideRenderItem },
+    { title: 'Title2', data: ['item3', 'item4'] },
+    { title: 'Title3', data: ['item5', 'item6'] },
+  ]}
+/>
+```
 
 This is a convenience wrapper around [`<VirtualizedList>`](virtualizedlist.md), and thus inherits its props (as well as those of [`<ScrollView>`](scrollview.md) that aren't explicitly listed here, along with the following caveats: