Rail/React and HTML <p> tags showing up Please Have a Look

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.

Screen Shot 2021-06-23 at 5.47.20 PM

  • 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 export default (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} />;

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.