From 1b57e8b74a4c3e38165bf7ec3d6c9a80a9e72f4e Mon Sep 17 00:00:00 2001
From: mcordini <mcordini@users.noreply.github.com>
Date: Mon, 9 Apr 2018 18:43:24 -0300
Subject: [PATCH] Fix SectionList example (#286)

* Fix SectionList example

* Update sectionlist.md

* Update sectionlist.md
---
 docs/sectionlist.md                           | 40 ++++++++++++------
 .../version-0.55/sectionlist.md               | 41 +++++++++++++------
 2 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/docs/sectionlist.md b/docs/sectionlist.md
index a58ebbff982043..19c133120f8f4c 100644
--- 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
index 67e6324d665698..e7da558ce1b047 100644
--- 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: