import React, {Component} from 'react';
import './App.css';
import HelloWordComponent from './HelloWordComponent.js';
import Counter from './CounterComponent.js';

class App extends Component{
  constructor(){
    super()

    this.addName = this.addName.bind(this)

    this.state = {
      name: "Sara",
      list:['Microsoft', 'FaceBook', 'React']
    }

  }

  addName(){
    this.setState(prevState =>({list: ['Yahoo', ...prevState.list]}))
  }


  render(){
    return (
    <div >
      {this.state.name}

      {this.state.list.map(name =>{
        return <div>
          <HelloWordComponent key = {name} name = {name}/>
          <Counter/>
          </div>
      })}

      <br/>
      <button onClick= {this.addName}>add a Name</button>
    </div>
    );
  }
}

export default <App/>

import React, { Component }  from 'react';

export default class Counter extends Component{
    constructor(){
        super()

        this.onPlusClick = this.onPlusClick.bind(this)

         this.state = {count : 0}
    }

    onPlusClick(){
        this.setState(prevState => ({count: prevState.count + 1}))
    }

    render(){
        return <div>
            {this.state.count}
            <button onClick = {this.onPlusClick}>+</button>
        </div>
    }
}