Skip to content

Commit 5fed4d5

Browse files
committed
Fix key prop issues
1 parent 41158fb commit 5fed4d5

File tree

2 files changed

+56
-23
lines changed

2 files changed

+56
-23
lines changed

src/components/Marked/Header.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,10 @@ export default (props) => {
1515
var url = props.url || '';
1616

1717
//id is required for gatsby's anchor tags to work
18-
return (
19-
<Heading {...props}>
20-
<a className="anchor" id={slug} name={slug}></a>
21-
{props.children}
22-
{' '}<a className="hash-link" href={url + '#' + slug}>#</a>
23-
</Heading>
24-
);
18+
return React.createElement(Heading, null, [
19+
<a className="anchor" id={slug} name={slug} key={0}></a>,
20+
props.children,
21+
<a className="hash-link" href={url + '#' + slug} key={1}>#</a>
22+
]);
2523
}
2624

src/components/Marked/index.tsx

Lines changed: 51 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -570,7 +570,7 @@ InlineLexer.prototype.output = function (src) {
570570
href = text
571571
}
572572

573-
out.push(React.createElement("a", { href: this.sanitizeUrl(href),key:href }, text))
573+
out.push(React.createElement("a", { href: this.sanitizeUrl(href), key:href }, text))
574574
continue
575575
}
576576

@@ -579,7 +579,7 @@ InlineLexer.prototype.output = function (src) {
579579
src = src.substring(cap[0].length)
580580
text = cap[1]
581581
href = text
582-
out.push(React.createElement("a", { href: this.sanitizeUrl(href),key:href }, text))
582+
out.push(React.createElement("a", { href: this.sanitizeUrl(href), key:href }, text))
583583
continue
584584
}
585585

@@ -624,36 +624,48 @@ InlineLexer.prototype.output = function (src) {
624624
if ((cap = this.rules.strong.exec(src))) {
625625
src = src.substring(cap[0].length)
626626
out.push(
627-
React.createElement("strong", null, this.output(cap[2] || cap[1]))
627+
React.createElement(
628+
"strong",
629+
{ key: src.length },
630+
this.output(cap[2] || cap[1])
631+
)
628632
)
629633
continue
630634
}
631635

632636
// em
633637
if ((cap = this.rules.em.exec(src))) {
634638
src = src.substring(cap[0].length)
635-
out.push(React.createElement("em", null, this.output(cap[2] || cap[1])))
639+
out.push(
640+
React.createElement(
641+
"em",
642+
{ key: src.length },
643+
this.output(cap[2] || cap[1])
644+
)
645+
)
636646
continue
637647
}
638648

639649
// code
640650
if ((cap = this.rules.code.exec(src))) {
641651
src = src.substring(cap[0].length)
642-
out.push(React.createElement("code", null, cap[2]))
652+
out.push(React.createElement("code", { key: src.length }, cap[2]))
643653
continue
644654
}
645655

646656
// br
647657
if ((cap = this.rules.br.exec(src))) {
648658
src = src.substring(cap[0].length)
649-
out.push(React.createElement("br", null, null))
659+
out.push(React.createElement("br", { key: src.length }, null))
650660
continue
651661
}
652662

653663
// del (gfm)
654664
if ((cap = this.rules.del.exec(src))) {
655665
src = src.substring(cap[0].length)
656-
out.push(React.createElement("del", null, this.output(cap[1])))
666+
out.push(
667+
React.createElement("del", { key: src.length }, this.output(cap[1]))
668+
)
657669
continue
658670
}
659671

@@ -708,6 +720,7 @@ InlineLexer.prototype.outputLink = function (cap, link) {
708720
title: link.title,
709721
target: shouldOpenInNewWindow ? "_blank" : null,
710722
rel: shouldOpenInNewWindow ? "nofollow noopener noreferrer" : null,
723+
key: link.href,
711724
},
712725
this.output(cap[1])
713726
)
@@ -718,6 +731,7 @@ InlineLexer.prototype.outputLink = function (cap, link) {
718731
src: this.sanitizeUrl(link.href),
719732
alt: cap[1],
720733
title: link.title,
734+
key: link.href,
721735
},
722736
null
723737
)
@@ -813,7 +827,7 @@ Parser.prototype.tok = function () {
813827
return []
814828
}
815829
case "hr": {
816-
return React.createElement("hr", null, null)
830+
return React.createElement("hr", { key: this.tokens.length }, null)
817831
}
818832
case "heading": {
819833
return (
@@ -822,6 +836,7 @@ Parser.prototype.tok = function () {
822836
level={this.token.depth}
823837
toSlug={this.token.text}
824838
usedSlugs={this.usedSlugs}
839+
key={this.tokens.length}
825840
>
826841
{this.inline.output(this.token.text)}
827842
</Header>
@@ -853,13 +868,20 @@ Parser.prototype.tok = function () {
853868
schema={schema}
854869
query={query}
855870
variables={variables}
871+
key={this.tokens.length}
856872
/>
857873
)
858874
}
859875
}
860876
}
861877

862-
return <Prism language={this.token.lang} code={this.token.text} />
878+
return (
879+
<Prism
880+
language={this.token.lang}
881+
code={this.token.text}
882+
key={this.tokens.length}
883+
/>
884+
)
863885
}
864886
case "table": {
865887
var table = [],
@@ -884,7 +906,7 @@ Parser.prototype.tok = function () {
884906
)
885907
}
886908
table.push(
887-
React.createElement("thead", null, React.createElement("tr", null, row))
909+
React.createElement("thead", { key: this.tokens.length }, React.createElement("tr", null, row))
888910
)
889911

890912
// body
@@ -915,7 +937,11 @@ Parser.prototype.tok = function () {
915937
body.push(this.tok())
916938
}
917939

918-
return React.createElement("blockquote", null, body)
940+
return React.createElement(
941+
"blockquote",
942+
{ key: this.tokens.length },
943+
body
944+
)
919945
}
920946
case "list_start": {
921947
var type = this.token.ordered ? "ol" : "ul",
@@ -925,7 +951,7 @@ Parser.prototype.tok = function () {
925951
body.push(this.tok())
926952
}
927953

928-
return React.createElement(type, null, body)
954+
return React.createElement(type, { key: this.tokens.length }, body)
929955
}
930956
case "list_item_start": {
931957
var body = []
@@ -934,7 +960,7 @@ Parser.prototype.tok = function () {
934960
body.push(this.token.type === "text" ? this.parseText() : this.tok())
935961
}
936962

937-
return React.createElement("li", null, body)
963+
return React.createElement("li", { key: this.tokens.length }, body)
938964
}
939965
case "loose_item_start": {
940966
var body = []
@@ -943,13 +969,14 @@ Parser.prototype.tok = function () {
943969
body.push(this.tok())
944970
}
945971

946-
return React.createElement("li", null, body)
972+
return React.createElement("li", { key: this.tokens.length }, body)
947973
}
948974
case "html": {
949975
return React.createElement("div", {
950976
dangerouslySetInnerHTML: {
951977
__html: this.token.text,
952978
},
979+
key: this.tokens.length,
953980
})
954981
}
955982
case "paragraph": {
@@ -958,12 +985,20 @@ Parser.prototype.tok = function () {
958985
null,
959986
this.inline.output(this.token.text)
960987
)
961-
: React.createElement("p", null, this.inline.output(this.token.text))
988+
: React.createElement(
989+
"p",
990+
{ key: this.tokens.length },
991+
this.inline.output(this.token.text)
992+
)
962993
}
963994
case "text": {
964995
return this.options.paragraphFn
965996
? this.options.paragraphFn.call(null, this.parseText())
966-
: React.createElement("p", null, this.parseText())
997+
: React.createElement(
998+
"p",
999+
{ key: this.tokens.length },
1000+
this.parseText()
1001+
)
9671002
}
9681003
}
9691004
}

0 commit comments

Comments
 (0)