I am working on a Rails blog with React components. My bug is in the Copy section of this page (the react component). When I run this app locally with the seed data a <p tag appears in the copy box
Note: I am not receiving any errors in the title or message section of this page. I am very new to React. React-specific language is a challenge, do not be afraid to use simple terms.
-
I thought that this might be from a missing closing tag - I searched through the app with no luck
-
I thought it might be from a mistake tag placed in the seed data - no luck
-
I switched the export statement from
export default PitchCopy;
to exportdefault (props) => <PitchCopy {...props} />;
This did not change anything in the browser
The above attempt per the below conversation
–you can see how to export it in the StoryElementsContainer function I refactored from a class component to a functional one.
Note that the non-traditional export is only required for components loaded directly into .erb files. So only ones that we register via ReactOnRails–
export default (props) => <PitchCopy {...props} />;
is the PitchCopy version of the StoryElementsContainer export statement
- I then attempted to use the dangerouslySetInnerHTML method within the component, and this did not help.
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import CKEditor from 'ckeditor4-react';
const PitchCopy = (props) => {
const { copy } = props;
const [pitchCopy, setPitchCopy] = useState(copy);
const handlePitchCopy = (event) => {
const data = event.editor.getData();
setPitchCopy(data);
};
return (
<div>
<div className="input-module module-copy">
<CKEditor
name="pitchCopy"
data={pitchCopy}
onChange={handlePitchCopy}
/>
</div>
</div>
);
};
PitchCopy.propTypes = {
copy: PropTypes.string.isRequired
};
// export default PitchCopy;
export default (props) => <PitchCopy {...props} />;