20200608 2305

WIP Screenshot from 202006082305

So after working on this for the better part of the day it became clear that I need an approach that didn't use DOM elements. Given how React renders content server-side. After much troubleshooting, a mentor shared textMap.map((element, index) which gave me all the data I needed 馃槄. Sometimes it all about knowing the right things to ask or search online. But it works! I shipped my first contribution to an Open-source project 馃槉!

export class CodeBlock extends React.Component {
render() {
console.log(this.props.children);
const codeBlockContent = this.props.children;
var codeBlockToken = codeBlockContent.split("\n", 3);
const textMap = codeBlockToken;

return (
<>
<div css={STYLE_CODE_BLOCK}>
{textMap.map((element, index) => {
return (
<div css={STYLE_PADDING}>
<div css={STYLE_PRE}>{index}.</div>
<div css={STYLE_CODE}>{element}</div>
</div>
);
})}
</div>
</>
);
}
}

Webmentions (WIP)

No mentions yet.

Get: daily updates on twitter, weekly updates over RSS and monthly newsletter.