JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<p><em>Read-only view</em></p>
<div>Title: <span data-bind="text: Title"></span></div>
<div>Owner: <span data-bind="text: Owner.FullName"></span></div>
Data:
<ul data-bind="foreach: Data">
    <li data-bind="text: Metric"></li>
</ul>
<hr />
<p><em>Editable view</em></p>
<div>Title: <input data-bind="value: Title" type="text" /></div>
<div>Owner: <input data-bind="value: Owner.FullName" type="text" /></div>
Data:
<div data-bind="foreach: Data">
    <input data-bind="value: Metric" type="text" />
</div>
<button data-bind="click: update">Accept</button>
<button data-bind="click: revert">Cancel</button>

JavaScript

// dummy data from api call
var data = {
 
    Title: "One",
    Owner: {
        Id: 123,
        FullName: "Dave User"
    },
    Data: [{
        Id: 1,
        Metric: 50
    }, {
        Id: 2,
        Metric: 45
    }, {
        Id: 3,
        Metric: 40
    }]
};

var cache = function () { };

var mapping = {
    create: function (options) {
        var model = ko.mapping.fromJS(options.data);
        // add editor pattern
        model.update = function (data) {
            cache.latestData = ko.toJS(data);
            ko.mapping.fromJS(cache.latestData, viewModel);
        };
        model.revert = function () {
            model.update(cache.latestData);
        };
        // is this needed?
        model.commit = function () {
          cache.latestData = ko.toJS(model);
        };
        return model;
    }
};

var viewModel = ko.mapping.fromJS(data, mapping);
viewModel.update(data);

ko.applyBindings(viewModel);