score:3
Accepted answer
you need to remove the first empty line and all the spaces at the beginning of each line.
it might look weird - but that is what reactmarkdown
expects you to do.
your component will end up looking like this: notice the "strange" spacing inside the backticked text.
import reactmarkdown from "react-markdown";
import gfm from 'remark-gfm';
const postcontent = () => {
const source = `
# hello, world!
---
~this doesn't work.~
`
return (
<reactmarkdown remarkplugins={[gfm]} children={source} />
);
};
export default postcontent;
score:1
this appears to be a whitespace issue, you've too much.
this doesn't work:
const postcontent = () => {
const source = `
# hello, world!
---
~this doesn't work.~
`
return (
<reactmarkdown remarkplugins={[gfm]} children={source} />
);
};
this works:
const postcontent = () => {
const source = `
# hello, world!
---
~this doesn't work.~
`;
return <reactmarkdown remarkplugins={[gfm]} children={source} />;
};
notice the "leading" whitespace per line is removed
Source: stackoverflow.com
Related Query
- Problem rendering Component in a different page with React Router
- Problem with rendering markdown in NextJS/React
- Problem with component bound to an api with axios in React Native not rendering
- I'm rendering a react class Some elements seem to have a problem with closing tags but i made sure there's no unclosed tags in between what can i do?
- Problem Rendering an API on a Bootstrap Table with React
- Problem with rendering data from backend React js, Spring HATEOAS
- Problem with rendering correct select option in React
- Rendering React components with promises inside the render method
- React vs Angular: Slow rendering with React
- Prevent react component from rendering twice when using redux with componentWillMount
- React performance: rendering big list with PureRenderMixin
- React js: Invariant Violation: processUpdates() when rendering a table with a different number of child rows
- How does one debug NextJS React apps with WebStorm?
- How to test decorated React component with shallow rendering
- How to use React links when rendering content with dangerouslySetInnerHtml?
- react sever-side rendering dealing with `window`, `localStorage`
- Initial static React HTML rendering with Webpack
- How to manage title, meta tags, etc, inside React with server rendering + streaming?
- React with NextJS and Next-CSS: You may need an appropriate loader to handle this file type
- Rendering React components with WebWorkers
- Set state with React Shallow Rendering
- using google fonts in nextjs with sass, css and semantic ui react
- React app with Server-side rendering crashes with load
- Dealing with ag grid react and rendering a grid of checkboxes
- How to solve react webpack problem with npm-start
- Error when rendering React Portal with Storyshots
- React Server Side Rendering with Sass
- Optimizing React Rendering with Function Partial Application
- how to deploy successfully React app with nextjs to AWS Amplify?
- Single React Component rendering with Babel Standalone with only index.html and Component
More Query from same tag
- bind react instance method in class component
- React – Import Stylesheet **only if** UserAgent is Mobile
- how to display 24 hours in xAxis on Highcharts
- Why 1 value from API doesn't not save?
- Keep classnames with CSS loader or organize code in React?
- Render ReactJS app on demand by calling a JS function
- React JSX loop on Set() object
- React filtering a list
- Clicking a link when enter key is pressed using React
- React Component not rendered
- how to filter images from a list of files in django-rest-framework
- Dynamically add child components in React
- Having multiple API calls in one componentDidMount - possible?
- Testing React Function was Called with Jest
- Avoid duplication when using React Context
- How to import a function in Next.js only on client side?
- Why isn't the link color changing back to its previous color on mouse out in react?
- New using React: TypeError: Cannot read property 'map' of undefined
- Two pages overlapping each other
- Can I pass several props into one rule of a styled component (react.js)
- firebase commands not working in vs code terminal 800a03ea error
- Decorate react component to add lifecycle methods
- How can I include a compiled react js component from a compiled react js single page app?
- Yup.string.when will always give the result undefined. How can i pass a string value into the .when method
- React state array adding values
- how to retrieve text from google drive documents
- next js '_next/static/YzkQBtj6rd9b69Th7lZs0/pages/index.js' error
- Confused about an auth0 lock example using react and redux
- How to get Android Version number in React-Native? (not API level number)
- Webpack is looking for react in global directory