Markdown Previewer and multiple presentational components

I recently got my Markdown Previewer to pass all of the tests, including the bonus. I was wondering how I should proceed in organizing the project. I want the <EditorComponent/> on the left side and the <PreviewerComponent/> on the right side. I tried to do this with a Flexbox, and then a Grid, but it did not work when I only had one ReactDOM.render() and one target <div/> in the <HTML/> section. You can find this project here.

Since the above did not work as intended, I did a separate connected container, app wrapper, provider, and ReactDOM.render() for each component, one for <EditorComponent/> and one for <PreviewerComponent/>. I also created two target <div/> elements. Here is the Markdown Previewer that has one component on the left and the other one on the right. Is this the correct way to deal with multiple presentational components, or should I try to make the one before this work? Thanks for any help.

Both provided links give 404’s

Thanks for looking. I figured out how to use just one ReactDOM.render(). I deleted most of the other versions and am currently working on this version. I still need to style it more and fix some issues with saving and deleting. I also want to find a way to change the background color of the text highlighter with JavaScript, since that is what I am missing from the different terminal themes. I tried to find a way to change the CSS ::selection.

1 Like