Visual Data Bindings with React

Visual Data Bindings use HTML attributes to tell CloudCannon which element on your page corresponds to which piece of data, allowing you to click on and edit data in the Visual Editor.

React passes data- attributes straight through to the DOM, so adding data-cms-bind to an element works the same as it does in plain HTML.CloudCannon draws the same editing overlays over it in the Visual Editor. For the attribute's syntax, please read our documentation on what Visual Data Bindings are.

The part React adds is threading the path. A binding names a value's full path from the root of your data, but a reusable component has no way of knowing where in that structure it has been placed. The component above it does, so pass the path down as a prop.

Pass binding paths through components#

Give each component a prop holding its own path, and build child bindings from it.

function Hero({ path, data }) {
  const bind = (key) => [path, key].filter(Boolean).join('.'); 

  return (
    <section>
      <h1 data-cms-bind={bind('title')}>{data.title}</h1>
      <p data-cms-bind={bind('subtitle')}>{data.subtitle}</p>
    </section>
  );
}

The parent passes the path it occupies, and a component rendered at the root of your data passes an empty string.

<Hero path="hero" data={page.hero} />
<Hero path="" data={page} /> 

Never render an empty binding#

An empty path is fine to pass as a prop, but it must never reach the DOM as an attribute. CloudCannon treats data-cms-bind="" as a binding it cannot resolve: the element still gets an overlay in the Visual Editor, bound to a field named unset that does not exist in your data.

Render the attribute only when the component has a path.

function Hero({ path, data }) {
  const bind = (key) => [path, key].filter(Boolean).join('.');

  return ( 
    <section {...(path ? { 'data-cms-bind': path } : {})}>
      <h1 data-cms-bind={bind('title')}>{data.title}</h1>
    </section>
  );
}

Arrays#

Every binding you nest adds a click, because a child binding only becomes selectable once its parent is selected. Where you have an array component rendering an item component, binding both means two clicks to reach an item.

Bind the items and leave the array container unbound. The items keep their reordering and removal controls, and a Organization Member reaches them one click sooner.