Skip to content

Instantly share code, notes, and snippets.

@nicolasdanelon
Last active June 15, 2018 17:35
Show Gist options
  • Save nicolasdanelon/1307a02ed651637100233eac742ef3c3 to your computer and use it in GitHub Desktop.
Save nicolasdanelon/1307a02ed651637100233eac742ef3c3 to your computer and use it in GitHub Desktop.
super calculadora
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
first: 0,
second: 0,
result: null,
cta: 'sumar!'
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
const { first, second } = this.state;
e.preventDefault();
if (first === 0 && second === 0) {
return;
}
this.setState({
result: parseInt(first) + parseInt(second)
}, () => this.itsDone());
}
itsDone() {
this.setState({ cta: 'Fin.' })
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome my awesome calculator</h1>
</header>
<form onSubmit={this.handleSubmit}>
<p className="App-intro">
<input
id="first"
onChange={e => this.setState({ first: e.target.value })}
value={this.state.first}
/>
</p>
<p className="App-intro">
<input
id="second"
onChange={e => this.setState({ second: e.target.value })}
value={this.state.second}
/>
</p>
<p className="App-intro">
{this.state.result && (<h1>{this.state.result}</h1>)}
<button>{this.state.cta}</button>
</p>
</form>
</div>
);
}
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment