fixing unique "key" prop errors in react dev mode
This commit is contained in:
Stacktoshi
parent
f907dc8473
commit
aa3b61bb2f
@ -14,81 +14,81 @@ interface MarkdownProps {
|
||||
}
|
||||
|
||||
const Markdown = forwardRef<HTMLDivElement, MarkdownProps>((props: MarkdownProps, ref) => {
|
||||
function renderToken(t: Token): ReactNode {
|
||||
function renderToken(t: Token, key: number): ReactNode {
|
||||
try {
|
||||
switch (t.type) {
|
||||
case "paragraph": {
|
||||
return <p>{t.tokens ? t.tokens.map(renderToken) : t.raw}</p>;
|
||||
return <p key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</p>;
|
||||
}
|
||||
case "image": {
|
||||
return <img src={t.href} />;
|
||||
return <img key={key} src={t.href} />;
|
||||
}
|
||||
case "heading": {
|
||||
switch (t.depth) {
|
||||
case 1:
|
||||
return <h1>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h1>;
|
||||
return <h1 key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h1>;
|
||||
case 2:
|
||||
return <h2>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h2>;
|
||||
return <h2 key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h2>;
|
||||
case 3:
|
||||
return <h3>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h3>;
|
||||
return <h3 key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h3>;
|
||||
case 4:
|
||||
return <h4>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h4>;
|
||||
return <h4 key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h4>;
|
||||
case 5:
|
||||
return <h5>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h5>;
|
||||
return <h5 key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h5>;
|
||||
case 6:
|
||||
return <h6>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h6>;
|
||||
return <h6 key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</h6>;
|
||||
}
|
||||
throw new Error("Invalid heading");
|
||||
}
|
||||
case "codespan": {
|
||||
return <code>{t.raw}</code>;
|
||||
return <code key={key}>{t.raw}</code>;
|
||||
}
|
||||
case "code": {
|
||||
return <pre>{t.raw}</pre>;
|
||||
return <pre key={key}>{t.raw}</pre>;
|
||||
}
|
||||
case "br": {
|
||||
return <br />;
|
||||
return <br key={key} />;
|
||||
}
|
||||
case "hr": {
|
||||
return <hr />;
|
||||
return <hr key={key} />;
|
||||
}
|
||||
case "blockquote": {
|
||||
return <blockquote>{t.tokens ? t.tokens.map(renderToken) : t.raw}</blockquote>;
|
||||
return <blockquote key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</blockquote>;
|
||||
}
|
||||
case "link": {
|
||||
return <HyperText link={t.href}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</HyperText>;
|
||||
return <HyperText link={t.href} key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</HyperText>;
|
||||
}
|
||||
case "list": {
|
||||
if (t.ordered) {
|
||||
return <ol>{t.items.map(renderToken)}</ol>;
|
||||
return <ol key={key}>{t.items.map(renderToken)}</ol>;
|
||||
} else {
|
||||
return <ul>{t.items.map(renderToken)}</ul>;
|
||||
return <ul key={key}>{t.items.map(renderToken)}</ul>;
|
||||
}
|
||||
}
|
||||
case "list_item": {
|
||||
return <li>{t.tokens ? t.tokens.map(renderToken) : t.raw}</li>;
|
||||
return <li key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</li>;
|
||||
}
|
||||
case "em": {
|
||||
return <em>{t.tokens ? t.tokens.map(renderToken) : t.raw}</em>;
|
||||
return <em key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</em>;
|
||||
}
|
||||
case "del": {
|
||||
return <s>{t.tokens ? t.tokens.map(renderToken) : t.raw}</s>;
|
||||
return <s key={key}>{t.tokens ? t.tokens.map(renderToken) : t.raw}</s>;
|
||||
}
|
||||
case "table": {
|
||||
return (
|
||||
<table className="table-auto border-collapse">
|
||||
<table className="table-auto border-collapse" key={key}>
|
||||
<thead>
|
||||
<tr>
|
||||
{(t.header as Tokens.TableCell[]).map(v => (
|
||||
<th className="border">{v.tokens ? v.tokens.map(renderToken) : v.text}</th>
|
||||
{(t.header as Tokens.TableCell[]).map((v, h_key) => (
|
||||
<th className="border" key={h_key}>{v.tokens ? v.tokens.map(renderToken) : v.text}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(t.rows as Tokens.TableCell[][]).map(v => (
|
||||
<tr>
|
||||
{v.map(d => (
|
||||
<td className="border px-2 py-1">{d.tokens ? d.tokens.map(renderToken) : d.text}</td>
|
||||
{(t.rows as Tokens.TableCell[][]).map((v, r_key) => (
|
||||
<tr key={r_key}>
|
||||
{v.map((d, d_key) => (
|
||||
<td className="border px-2 py-1" key={d_key}>{d.tokens ? d.tokens.map(renderToken) : d.text}</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
@ -103,7 +103,7 @@ const Markdown = forwardRef<HTMLDivElement, MarkdownProps>((props: MarkdownProps
|
||||
if (props.plainText ?? false) {
|
||||
return t.raw;
|
||||
}
|
||||
return <Text content={t.raw} tags={[]} />;
|
||||
return <Text content={t.raw} tags={[]} key={key} />;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import "./send-zap.css";
|
||||
import { type ReactNode, useEffect, useState } from "react";
|
||||
import { Fragment, type ReactNode, useEffect, useState } from "react";
|
||||
import { LNURL } from "@snort/shared";
|
||||
import { EventPublisher, NostrEvent, TaggedNostrEvent } from "@snort/system";
|
||||
import { secp256k1 } from "@noble/curves/secp256k1";
|
||||
@ -37,6 +37,7 @@ export interface SendZapsProps {
|
||||
onFinish: () => void;
|
||||
onTargetReady?: () => void;
|
||||
button?: ReactNode;
|
||||
key?: string;
|
||||
}
|
||||
|
||||
export function SendZaps({ lnurl, pubkey, aTag, eTag, targetName, onFinish, onTargetReady }: SendZapsProps) {
|
||||
@ -215,7 +216,7 @@ export function SendZapsDialog(props: Omit<SendZapsProps, "onFinish">) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [ready, setReady] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Fragment key={props.key}>
|
||||
{props.button ? (
|
||||
<div onClick={() => setOpen(true)}>{props.button}</div>
|
||||
) : (
|
||||
@ -229,7 +230,7 @@ export function SendZapsDialog(props: Omit<SendZapsProps, "onFinish">) {
|
||||
<SendZaps {...props} onFinish={() => setOpen(false)} onTargetReady={() => setReady(true)} />
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { NostrLink, NostrPrefix, ParsedFragment, transformText, tryParseNostrLink } from "@snort/system";
|
||||
import { FunctionComponent, useMemo } from "react";
|
||||
import { Fragment, FunctionComponent, useMemo } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import { Emoji } from "./emoji";
|
||||
@ -22,10 +22,10 @@ export function Text({ content, tags, eventComponent, className }: TextProps) {
|
||||
return transformText(content, tags);
|
||||
}, [content, tags]);
|
||||
|
||||
function renderFrag(f: ParsedFragment) {
|
||||
function renderFrag(f: ParsedFragment, key: number) {
|
||||
switch (f.type) {
|
||||
case "custom_emoji":
|
||||
return <Emoji name={f.content} url={f.content} />;
|
||||
return <Emoji name={f.content} url={f.content} key={key} />;
|
||||
case "media":
|
||||
case "link": {
|
||||
if (f.content.startsWith("nostr:")) {
|
||||
@ -36,24 +36,25 @@ export function Text({ content, tags, eventComponent, className }: TextProps) {
|
||||
link.type === NostrPrefix.Address ||
|
||||
link.type === NostrPrefix.Note
|
||||
) {
|
||||
return eventComponent?.({ link }) ?? <EventEmbed link={link} />;
|
||||
return <Fragment key={key}>
|
||||
{eventComponent?.({ link })} </Fragment> ?? <EventEmbed link={link} key={key} />;
|
||||
} else {
|
||||
return <Mention pubkey={link.id} />;
|
||||
return <Mention pubkey={link.id} key={key} />;
|
||||
}
|
||||
}
|
||||
}
|
||||
return <HyperText link={f.content}>{f.content}</HyperText>;
|
||||
return <HyperText link={f.content} key={key}>{f.content}</HyperText>;
|
||||
}
|
||||
case "mention":
|
||||
return <Mention pubkey={f.content} />;
|
||||
return <Mention pubkey={f.content} key={key} />;
|
||||
case "hashtag":
|
||||
return <Link to={`/t/${f.content}`}>#{f.content}</Link>;
|
||||
return <Link to={`/t/${f.content}`} key={key}>#{f.content}</Link>;
|
||||
default: {
|
||||
if (f.content.startsWith("lnurlp:")) {
|
||||
// LUD-17: https://github.com/lnurl/luds/blob/luds/17.md
|
||||
const url = new URL(f.content);
|
||||
url.protocol = "https:";
|
||||
return <SendZapsDialog pubkey={undefined} lnurl={url.toString()} button={<Link to={""}>{f.content}</Link>} />;
|
||||
return <SendZapsDialog pubkey={undefined} lnurl={url.toString()} button={<Link to={""}>{f.content}</Link>} key={key} />;
|
||||
}
|
||||
return f.content;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user