Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React, { Component } from "react";
import phone from "phone";
import { sendMessage } from "./api";
function isValidPhone(str) {
return phone(str).length > 0;
}
export default class Send extends Component {
state = {
number: "",
message: ""
};
get valid() {
const { number, message } = this.state;
return message && isValidPhone(number);
}
get formattedPhone() {
return phone(this.state.number).join(" ");
}
update = field => e => this.setState({ [field]: e.target.value });
submit = async e => {
e.preventDefault();
await sendMessage([this.state.number], this.state.message);
this.setState({ number: "", message: "" });
};
render() {
const { number, message } = this.state;
return (
<form onSubmit={this.submit}>
<div>
<input
value={number}
onChange={this.update("number")}
placeholder="Enter phone number"
/>
{isValidPhone(number) && (
<div className="validPhone">{this.formattedPhone}</div>
)}
</div>
<div>
<input
value={message}
onChange={this.update("message")}
placeholder="Enter a message"
/>
</div>
<div>
<button type="submit" disabled={!this.valid}>
Send
</button>
</div>
</form>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.