6

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:

Experience Editor markup

What am I doing wrong?

4

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.

9

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>;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.