YerlinMatu/index.html

## index.html
<html>
<main id="app">
</main>
</html>

## learning-state-in-react-elimination-pop.markdown

      
    Raw
  

              learning-state-in-react-elimination-pop.markdown
            
          
    Learning State In React Elimination pop

A Pen by Yerlin Matu on CodePen.
License.

  
## learning-state-in-react-elimination-stack.markdown

      
    Raw
  

              learning-state-in-react-elimination-stack.markdown
            
          
    Learning State In React Elimination Stack

A Pen by Yerlin Matu on CodePen.
License.

  
## script.babel
let ListaClientes = [
    {nombre:'Juan' , ciudad:'Cali', edad:27},
    {nombre:'Peter', ciudad:'Cali', edad:31},
    {nombre:'Ana'  , ciudad:'Barranquilla', edad:28},
    {nombre:'Oscar', ciudad:'Quibdó', edad:24},
    {nombre:'Dani' , ciudad:'Quibdó', edad:43},
    {nombre:'Pedro', ciudad:'Bogotá', edad:25},
    {nombre:'Pablo', ciudad:'Medellín' , edad:34},
    {nombre:'Marta', ciudad:'Medellín' , edad:23}
];

function Eliminar(){
     ListaClientes.pop();
     return ReactDOM.render(<GentilTag/>, document.getElementById('app'));
}

let gentilicio = _.where(ListaClientes, {ciudad:'Medellín'});

class GentilTag extends React.Component{
     constructor(props){
       super(props)
     }
    getInitialState(){
       return { title: 'Eliminación en Pila'}
    }
    render(){
       this.state = ListaClientes.map(user=>{
            return (
              <tr>
                <th>{ user.nombre }</th>
                <th>{ user.edad }</th>
                <th>{ user.ciudad }</th>
              </tr>
            )
      })
      return  (
        <div className="container">
          <h3>ELIMINACIÓN EN PILA</h3>
          <input ref="person" type="text"/>
          <button class="btn" onClick={ Eliminar }>Eliminar</button>
              <table>
                <thead>
                  <tr>
                    <th><strong>Nombre</strong></th>
                    <th><strong>Edad</strong></th>
                    <th><strong>Ciudad</strong></th>
                  </tr>
                </thead>
                <tbody>
                  { this.state }
                </tbody>
              </table>
          </div>
      )
    }
}

ReactDOM.render(<GentilTag/>, document.getElementById('app'));

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>

## style.scss
$red:#E53A40;
html{
background-image: linear-gradient(80deg, #d299c2 0%, #c3cfe2 100%);
}
.container {
   margin:0 auto;
   display:block;
   width:80%;
  h3 { color:#1F2124}
   thead {
     color:black;
     text-transform:uppercase;
  }
  tbody th{
      color:black;
    }
  button{
    float:right;
    background-color:$red;
    border-color:$red;
    color:black;
    border-bottom:4px red solid;
    &:active{
       color:white;
       border-bottom:none;
    }
  }

}

## styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css" rel="stylesheet" />
	let ListaClientes = [
	{nombre:'Juan' , ciudad:'Cali', edad:27},
	{nombre:'Peter', ciudad:'Cali', edad:31},
	{nombre:'Ana' , ciudad:'Barranquilla', edad:28},
	{nombre:'Oscar', ciudad:'Quibdó', edad:24},
	{nombre:'Dani' , ciudad:'Quibdó', edad:43},
	{nombre:'Pedro', ciudad:'Bogotá', edad:25},
	{nombre:'Pablo', ciudad:'Medellín' , edad:34},
	{nombre:'Marta', ciudad:'Medellín' , edad:23}
	];

	function Eliminar(){
	ListaClientes.pop();
	return ReactDOM.render(<GentilTag/>, document.getElementById('app'));
	}

	let gentilicio = _.where(ListaClientes, {ciudad:'Medellín'});

	class GentilTag extends React.Component{
	constructor(props){
	super(props)
	}
	getInitialState(){
	return { title: 'Eliminación en Pila'}
	}
	render(){
	this.state = ListaClientes.map(user=>{
	return (
	<tr>
	<th>{ user.nombre }</th>
	<th>{ user.edad }</th>
	<th>{ user.ciudad }</th>
	</tr>
	)
	})
	return (
	<div className="container">
	<h3>ELIMINACIÓN EN PILA</h3>
	<input ref="person" type="text"/>
	<button class="btn" onClick={ Eliminar }>Eliminar</button>
	<table>
	<thead>
	<tr>
	<th><strong>Nombre</strong></th>
	<th><strong>Edad</strong></th>
	<th><strong>Ciudad</strong></th>
	</tr>
	</thead>
	<tbody>
	{ this.state }
	</tbody>
	</table>
	</div>
	)
	}
	}

	ReactDOM.render(<GentilTag/>, document.getElementById('app'));
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
	$red:#E53A40;
	html{
	background-image: linear-gradient(80deg, #d299c2 0%, #c3cfe2 100%);
	}
	.container {
	margin:0 auto;
	display:block;
	width:80%;
	h3 { color:#1F2124}
	thead {
	color:black;
	text-transform:uppercase;
	}
	tbody th{
	color:black;
	}
	button{
	float:right;
	background-color:$red;
	border-color:$red;
	color:black;
	border-bottom:4px red solid;
	&:active{
	color:white;
	border-bottom:none;
	}
	}

	}
	<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css" rel="stylesheet" />