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;

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);
    let projects = this.state.projects;
    projects.push(project);
    this.setState({projects:projects});
  }

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

export default App;

update state of parent component