JSON + React

by buildbreaker

HTML

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

CSS

body {
  background-color: black;
  color: white;
  padding: 20px;
}

label {
  display: inline-block;
  width: 80px;
  text-align: right;
  padding-right: 5px;
}

#campos {
  background: #44444a;
  border-radius: 4px;
  padding: 20px;
  font-size: 18px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 500px;
}

React

class JSONApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	infos: [
      	{ label: "Nome", valor: "Aloisio Wohlmeister" },
        { label: "Email", valor: "buildbreaker.aaw@gmail.com" },
        { label: "Instagram", valor: "@build.breaker" }
    	]
    }
    
    this.handleKeyUp = this.handleKeyUp.bind(this);
  }
  
  handleKeyUp(label, event) {
  	let infosAux = this.state.infos;
    
    let item = infosAux.find(item => item.label == label)
    item.valor = event.target.value;
    
  	this.setState({ infos: infosAux });
  }
  
  render() {
    return (
    	<div key="conteudo">
        <div id="campos" key="campos">
          {this.state.infos.map(item => (
            <div id={'infos_' + item.label} key={'infos_' + item.label} className="infos">
              <label key={'lbl_' + item.label} htmlFor={item.label}>{item.label}:</label>
              <input type="text" key={item.label} defaultValue={item.valor} 
                     onKeyUp={(e) => this.handleKeyUp(item.label, e)}
                     size="40" />
            </div>
          ))}
        </div>
        <div key="json">
          {JSON.stringify(this.state.infos, null, 2)}
        </div>
      </div>
    )
  }
}

ReactDOM.render(<JSONApp />, document.querySelector("#app"))