React CS Working FE Render for rawdata

Showing how to build HTML dynamically

by Ben Clayton

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app,#app2 {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.cols {
	display:inline-block;
	width:40%;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

//  https://zhenyong.github.io/react/docs/more-about-refs.html


class Base extends React.Component {
  constructor(props) {
    super(props)
		debugger
		if(props.rdata){
			this.data=props.rdata();
			if (this.data.content){
				if (this.data.content.length){
					this.state = {content:[]}
					var key=0;
					this.data.content.forEach((blk)=>{
						this.state.content.push({content:factory(blk.type,blk),key:key++})
					})
				} else {
					var blk = this.data
					this.state.content = factory(blk.type,blk.content)
				}
			}
			console.log("rdata",this.data)
			if(this.premount){this.premount(this.data)}
		}	
  }
}


function factory(type,data){
		switch (type){
				case "Heading":
				return <Heading rdata={(ref) =>{return data}} />	
				case "SubHeading":
				return <SubHeading rdata={(ref) =>{return data}}  />
				case "MultiColFrame":
				return <MultiColFrame rdata={(ref) =>{return data}}  />
				case "MultiColColumn":
				return <MultiColColumn rdata={(ref) =>{return data}}  />
				case "Picture":
				return <Picture rdata={(ref) =>{return data}}  />
				default:
				console.error("type not recognised ",type)
		}
		return null
}

class MultiColFrame extends Base {
	  
  render() {
    return (
				<div>
       {this.state.content.map(col => (
					<div key={col.key} className='cols'>{col.content}</div>
			  ))}
			</div>
     )
  }
}

class MultiColColumn extends Base {
	  
  render() {
    return (
				<div>
       {this.state.content.map(col => (
					<div key={col.key} className='col'>{col.content}</div>
			  ))}
			</div>
     )
  }
}

class Heading extends Base {
	
	premount(bdata){
		this.state={text: bdata.text};
	}
  
  render() {
    return (
      <h1>
        {this.state.text}
      </h1>
    )
  }
}

class SubHeading extends Heading {
  render() {
    return (
      <i>
        {this.state.text}
      </i>
    )
  }
}

class Picture extends Base {
	premount(bdata){
		this.state={src: bdata.picture, width: bdata.width};
	}
  render() {
   ...