JSFiddle - React, Tailwind, and code Playground

by cloud8421

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="main"></div>

CSS

body {
    padding: 4em;
}

JavaScript

var PostsList = function (container, data) {
    this.container = container;
    this.data = data;
}

PostsList.prototype.render = function () {
    var ul = document.createElement('ul');
    var lis = this.data.map(function (post) {
        var li = document.createElement('li');
        li.innerText = post.title;
        ul.appendChild(li);
    });
    while (this.container.hasChildNodes()) {
        this.container.removeChild(this.container.lastChild);
    }
    this.container.appendChild(ul);
}

var firstDataset = [{
    title: 'My new blog post'
}, {
    title: 'Managing state'
}];

var secondDataset = [{
        title: 'Updated blog post'
    }, {
        title: 'New state'
    }];

var datasets = [firstDataset, secondDataset];

var postsList = new PostsList(document.getElementById('main'), firstDataset);

postsList.render();

setInterval(function () {
    var idx = Math.round(Math.random(1));
    postsList.data = datasets[idx]; 
    postsList.render();
}, 500);