Visual data bindings with React

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.

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.