Playing with React

index.html

<div id="app">
{
  "a": 1,
  "b": 2,
  "c": {
    "d": 3,
    "e": {
      "f": 4,
      "g": [
        5,
        6,
        7
      ],
      "h": null
    }
  }
}
</div>

playing-with-react.markdown

Playing with React

A Pen by Jeremy Kahn on CodePen.

License.

script.babel

const clone = obj => JSON.parse(JSON.stringify(obj));

const List = listData => listData.map(
  (item, i) => <li key={String(i)}><Value rawData={item}/></li>
);

const Value = ({ rawData }) => 
  Array.isArray(rawData) ? 
    <ol>{List(rawData)}</ol> :
  typeof rawData === 'object' && rawData !== null ?
    <DataList data={rawData} /> :
    <span>{String(rawData)}</span>
  ;

const DataList = props => <dl>
  {Object.keys(props.data).map(
      objKey => ([
        <dt>{objKey}:</dt>,
        <dd><Value 
          rawData={props.data[objKey]}
        /></dd>
      ])
    )}
  </dl>;

class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      cleanData: clone(props.data),
      dirtyData: JSON.stringify(props.data, null, 2),
      isClean: true
    };
    this.handleTextareaChange = this.handleTextareaChange.bind(this);
  }
  
  handleTextareaChange (e) {
    let cleanData;
    let isClean = true
    const { value: dirtyData } = e.target;
    
    this.setState({ dirtyData });
    
    try {
      cleanData = JSON.parse(dirtyData);
    } catch (e) {
      cleanData = this.state.cleanData;
      isClean = false;
    }
    
    this.setState({ cleanData, isClean });
  }
  
  render () {
    return <div>
      <textarea
        value={this.state.dirtyData}
        onChange={this.handleTextareaChange}
        className={this.state.isClean ? 'clean' : ''}
      />
      <DataList data={this.state.cleanData} />
    </div>;
  }
}

const el = document.getElementById('app');

ReactDOM.render(
  <App data={JSON.parse(el.innerText)} />, 
  el
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>

style.scss

$hover-color: #f902;

dl {
  background: rgba(255, 255, 128, 0.1);
  
  &:hover {
    background: $hover-color;
  }
}

dt {
  border-top: solid 2px #f00;
  font-weight: bold;
}

dd {
  border-left: solid 2px #f90;
  
  &:hover {
    background: $hover-color;
  }
}
  
textarea {
  background: pink;
  height: 250px;
  width: 300px;
  font-family: monospace;
  
  &.clean {
    background: palegreen;
  }
}

ol {
  font-weight: bold;
  
  li {
    &:hover {
      background: $hover-color;
    }
  }
  
  span {
    font-weight: normal;
  }
}