*React.js*

React and chart.js snippets

elementsCountByDate.js

# count of elements (categories) by date

// Our labels along the x-axis
var dateSnapshot = [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050];
// For drawing the lines
var walls = [86,114,106,106,107,111,133,221,783,2478];
var floors = [282,350,411,502,635,809,947,1402,3700,5267];
var beams = [168,170,178,190,203,276,408,547,675,734];
var columns = [40,20,10,16,24,38,74,167,508,784];
var piles = [6,3,2,2,7,26,82,172,312,433];


var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line', //or bar
  data: {
    labels: dateSnapshot,
    datasets: [
      { 
        data: walls,
        label: "Walls",
        borderColor: "#3e95cd",
        fill: false
      },
      {
        data: floors,
        label: "Floors",
        borderColor: "#8e5ea2",
        fill: false
      }
    ]
  }
});

mapArray.js

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {text:"",
                  todos: [
                    {
                      id: 1,
                      name: 'Meeting1'
                    },
                    {
                      id: 2,
                      name: 'Kids to School'
                    },
                    {
                      id: 3,
                      name: 'Food shopping'
                    },
                  ]
    };
    
   }

  render() {
    return (
      <div className="App">
        <TodoForm/>
        <TodoList todos = {this.state.todos}/>
        </div>        
    );
  }//close render


}

class TodoForm extends Component{
  render(){
    return (
      <div>
        TODOFORM
      </div>
    )
  }
}


class TodoList extends Component {
  
  render(){
    return (
    <ul className='list-group'>
  {
    this.props.todos.map(todo =>{
      return <li className='list-group-item' todo={todo} key={todo.id}> {todo.name} </li>
    })
  }
</ul>
    ); //close return
  }//close render  
}//close TodoList

export default App;

toDoListApp.js

import React, { Component } from 'react';
import './App.css';


class App extends Component {

  constructor(props) {
    super(props);
    this.state = {text:"",
                  todos: [
                    {
                      id: 1,
                      text: 'Meeting1'
                    },
                    {
                      id: 2,
                      text: 'Kids to School'
                    },
                    {
                      id: 3,
                      text: 'Food shopping'
                    },
                  ]
    };
    
   }

  render() {
    return (
      <div className="App">
        <TodoForm onTodoAdd = {this.handleTodoAdd} />
        <TodoList todos = {this.state.todos}/>
        </div>        
    );
  }//close render

  handleTodoAdd = text =>{
    var newTodo = {
      id: this.state.todos.length + 1,
      text: text
    }
    this.setState({todos: this.state.todos.concat(newTodo)})
  }

}

class TodoForm extends Component{
  render(){
    return (
      <div>
        <form onSubmit = {this.onSubmit}>
          <div className='form-group'>
            <label>Todo text</label>
            <input type='text' ref='text' onChange = {this.onChange} className='form-control' />
          </div>
        </form>
      </div>
    )//close return
  }//close render

onChange(){
  console.log('changing text...')
}

onSubmit = (e) => {
  e.preventDefault();
  var text = this.refs.text.value.trim();

  if(!text){
    alert('Please enter a todo');
    return;
  }
  this.props.onTodoAdd(text);
  this.refs.text.value='';
}

}//close TodoForm


class TodoList extends Component {
  
  render(){
    return (
    <ul classtext='list-group'>
  {
    this.props.todos.map(todo =>{
      return <li className='list-group-item' todo={todo} key={todo.id}> {todo.id + ". " + todo.text} </li>
    })
  }
</ul>
    ); //close return
  }//close render  
}//close TodoList

export default App;