Rendering UI with Data in React Component #1

6th January, 2017

Diode

This example shows how data in json format can be passed to a react component.

Index

index.html

1
2
3
<div id="root"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// hard coded data
var data = {
   "name" : "Arun",
   "age"  : "28",
   "place" : "Kochi",
   "groups" : [
     "football",
     "basketball",
     "cricket"
   ]
}
// render `App` component
// pass data properties to `App` component
ReactDOM.render(
  <App name={data.name} age={data.age} place={data.place} groups={data.groups}/>,
  document.getElementById('root')
);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

App (React Component)

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React, { Component } from 'react';
import './App.css';
// `App` component
class App extends Component {
  render() {
    return (
      <div className="App">
        {/* show name */}
        <label><span>Name </span>: {this.props.name}</label>
        {/* show age */}
        <label><span>Age x</span>: {this.props.age}</label>
        {/* show place*/}
        <label><span>Place </span>: {this.props.place}</label>
        <div>
          <label>Groups</label>
          <ul className="groups">
            {/* iterate in groups */}
            {this.props.groups.map((group) =>
              <li>
                {group}
              </li>
            )}
          </ul>
        </div>
      </div>
    );
  }
}
export default App;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

App.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.App {
  background-color: #eee;
  margin: 0;
  padding: 10px;
}
.App>label{
  display: block;
}
.App>label>span{
  width: 60px;
  display: inline-block;
}
.App>div{
  margin-top: 10px;
}
.groups{
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 5px 30px;
}
.groups>li{
  text-transform: capitalize;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

The resulting UI will be

Live Editor

1
2
<!-- index.html -->
<div id="root"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
/* App.css */
.App {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
/* Javascript code merged into one file */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX