Visual data bindings with React

Last modified: November 22nd, 2023

Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.

Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.

React allows you to add the data-cms-bind attribute on any DOM element. It is recommended that these are added recursively into each object. If you are using an older version of React, you may need to forward this on differently. Please refer to the React documentation.

heading.jsx
copied
class Heading extends React.Component {
  render() {
    return (
      <h1 data-cms-bind="title">{this.props.title}</h1>
    );
  }
}

It is recommended that you pass the parent binding as a prop. This way your component can be reused in any stack. For the base case a empty string should be used as the binding. If you have an array component and a component for each array, it is recommended to skip the array binding to reduce the number of editor clicks.

Related Articles

Open in a new tab