Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 79x 6x 8x 6x 16x 16x 8x 3x | import { ReactElement, ReactNode } from "react";
import reactStringReplace from "react-string-replace";
export const generateBoldAnswerJSX = (searched: string, resultsJSX: ReactElement) => {
const boldText = (text: string) => {
const replacedText = reactStringReplace(text, searched, (match, i) => (
<strong key={`bold-${i}`}>{match}</strong>
));
return replacedText;
};
return JSXModifyText(resultsJSX, boldText);
};
// https://adueck.github.io/blog/recursively-modify-text-jsx-react/ - Modify JSX
type Node = ReactElement;
export function JSXModifyText(e: Node, modifier: (s: string) => ReactNode): ReactElement {
// a. it's nothing. return and stop.
Iif (!e) {
return e;
}
// b. it's text. modify, return and stop.
if (typeof e === "string") {
return <>{modifier(e)}</>;
}
// we have an element with something inside
// let's return the outside and recursively work on the inside
return {
...e,
props: {
...e.props,
children:
// c. There's an array of nodes inside -> repeat for each one ⤴
Array.isArray(e.props.children)
? e.props.children.map((x: Node) => JSXModifyText(x, modifier))
: // d. There's just one node inside -> repeat for it ⤴
JSXModifyText(e.props.children, modifier),
},
};
}
|