List Rendering in React and Vue.js

One of the basic ways to learn some of the JavaScript frameworks is to know how it renders a list of values. This post will show you how it is done in React and Vue.js

List Rendering in React

<div id="root"></div>
class ListPanel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: []};
    this.setState({value: Object.assign(this.state.value, this.props.value)});
  }
  
  render() {
      return (
        <>
          <div className="card w-25">
            <div className="card-header bg-primary text-white">
              {this.props.title}
            </div>
            <div className="card-body">
              <ul className="list-group list-group-flush">
                {this.state.value.map((item, index) => <li className="list-group-item">{item.name}</li>)}
              </ul>
            </div>
          </div>
        </>
   )}
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {permitToWorkTypes: [{name: "Hot Permit Work"}, {name: "Cold Permit Work"}, {name: "Height Permit Work"}, {name: "Confined Spaces Permit To Work"}, {name: "Excavation Permit"}, {name: "Chemical Work Permit"}, {name: "Electrical Isolation Permit"}]};
  }
  
  render() {
      return (<><ListPanel title="Permit to Work Types" value={this.state.permitToWorkTypes} /></>)
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

See the Pen List Rendering – React by John Pili (@johnpili) on CodePen.

List Rendering in Vue.js

<div id="root">
  <list-panel title="Permit to Work Types" :value="permitToWorkTypes"></list-panel>
</div>
Vue.component('list-panel', {
  template: `
  <div class="card w-75">
    <div class="card-header bg-primary text-white" v-html="title"></div>
    <div class="card-body">
      <ul class="list-group list-group-flush">        
        <li class="list-group-item" v-for="item in value" v-html="item.name"></li>
      </ul>
    </div>
  </div>`,
  props: {
    title: "",
    value: [],
  },  
});

var app = new Vue({
  el: "#root",
  data: {
    permitToWorkTypes: [{name: "Hot Permit Work"}, {name: "Cold Permit Work"}, {name: "Height Permit Work"}, {name: "Confined Spaces Permit To Work"}, {name: "Excavation Permit"}, {name: "Chemical Work Permit"}, {name: "Electrical Isolation Permit"}],
  },
  methods: {    
  }
 });

See the Pen List Rendering – Vue by John Pili (@johnpili) on CodePen.

Leave a Reply