import React, { Component } from 'react';
import Projects from './components/Projects.js';
import AddProject from './components/addProject.js';

class App extends Component {
  constructor() {
    super();
    this.state = {
      projects: []
    }
  }

  componentWillMount() {
    //ajax to be called here
    this.setState({projects: [
      {
        title: 'Business Website',
        category: 'Web Design'
      },
      {
        title: 'Social App',
        category: 'Mob Design'
      },
      {
        title: 'Ecommerce',
        category: 'Mob app'
      }
    ]});
  }

  handleAddProject(project) {
    console.log('project', project);
  }

  render() {
    return (
      <div className="container">
        <AddProject addProject={this.handleAddProject.bind(this)}/>
        <Projects projects={this.state.projects} />
      </div>
    );
  }
}

export default App;

@@ -612,16 +612,19 @@
 t) %7B%0A   
+ //
  console
@@ -649,16 +649,124 @@
 oject);%0A
+    let projects = this.state.projects;%0A    projects.push(project);%0A    this.setState(%7Bprojects:projects%7D);%0A
   %7D%0A%0A  r

update state of parent component