React

by Abdul Ahmad

HTML

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

CSS

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

.arrayItem {
  margin-left: 10px;
}

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

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

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	data: getAllData(),
    }
  }
  
  render() {
  	const { data } = this.state;
    return (
      <div>
        { Object.keys(data).map((key, i) => {
          const datum = data[key];
        	return <Obj key={i} data={datum} obKey={key} />
        })}
      </div>
    )
  }
}

class Obj extends React.PureComponent {
	render() {
  	const { obKey, data } = this.props;
  	return (
    	<div>
    	  {"'" + obKey + "': ["}
        { data.map((datum, i) => (
        	<div className='arrayItem' key={i}>
            {"'" + datum + "',"}
          </div>
        ))}
        {']'}
    	</div>
    );
  }
}

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


function getAllData() {
	return getRawData().reduce((acc, item) => {
    if (!acc[item.chapterId]) acc[item.chapterId] = [item.name];
    else acc[item.chapterId].push(item.name);
    return acc;
  }, {});
}




function getRawData() {
	return [
  	{
        'name': 'Other viral diseases (B25-B34)',
        'chapterId': 1,
        'sectionId': 15
    },
    {
        'name': 'Mycoses (B35-B49)',
        'chapterId': 1,
        'sectionId': 16
    },
    {
        'name': 'Protozoal diseases (B50-B64)',
        'chapterId': 1,
        'sectionId': 17
    },
    {
        'name': 'Helminthiases (B65-B83)',
        'chapterId': 1,
        'sectionId': 18
    },
    {
        'name': 'Pediculosis, acariasis and other infestations (B85-B89)',
        'chapterId': 1,
        'sectionId': 19
    },
    {
        'name': 'Sequelae of infectious and parasitic diseases (B90-B94)',
        'chapterId': 1,
        'sectionId': 20
    },
    {
        'name': 'Bacterial and viral infectious agents (B95-B97)',
        'chapterId': 1,
        'sectionId': 21
    },
    {
        'name': 'Other infectious diseases (B99)',
        'chapterId': 1,
        'sectionId': 22
    },
    {
        'name': 'Malignant neoplasms of...