Seeing Experience Editor markup instead of an editable field when using Sitecore JSS with React

Question

I'm trying to output an editable field in a component of my React-based Sitecore JSS application:

import React from 'react';
import PropTypes from 'prop-types';

const AwesomeComponent = ({ fields }) => {
    return <div>{fields.title.editable} is awesome!</div>;

However when I add the component to a route and open it in the Experience Editor, I don't see an editable field, just some markup:

What am I doing wrong?

Answer 1

For posterity it's worth noting that in later versions of JSS it's recommended to use the field rendering helper components, for example in this case:

import { Text } from '@sitecore-jss/sitecore-jss-react';
import React from 'react';
import PropTypes from 'prop-types';

const AwesomeComponent = ({ fields }) => {
    return <div><Text field={fields.title} /> is awesome!</div>;

These handle the editable experience and encoding for you.

Answer 2

For your own safety, React will automatically escape HTML in any rendered output. Since Sitecore provides its own markup for the Experience Editor, you need to use the dangerouslySetInnerHTML attribute to disable this behavior.

const AwesomeComponent = ({ fields }) => {
    return <div>
        <span dangerouslySetInnerHTML={{__html: fields.title.editable}} /> is awesome!
    </div>;