class TweetBox extends React.Component {
constructor(props) {
super(props);
this.state = {
text: '',
photoAdded: false,
};
}
handleChange = (e) => {
this.setState({ text: e.target.value });
};
togglePhoto = () => {
this.setState((prevState) => ({ photoAdded: !prevState.photoAdded }));
}
getRemainingChars = () => {
let chars = 280 - this.state.text.length;
if (this.state.photoAdded) chars = chars - 23;
return chars;
}
render() {
const isTweetButtonDisabled = this.state.text.length === 0 && !this.state.photoAdded;
return (
<div className="card bg-light">
<div className="card-body text-right">
<textarea className="form-control" onChange={this.handleChange}></textarea>
<br/>
<span>{this.getRemainingChars()}</span>
<button className="btn btn-primary" disabled={isTweetButtonDisabled}>Tweet</button>
<button className="btn btn-secondary" onClick={this.togglePhoto}>
{this.state.photoAdded ? "✓ Photo Added" : "Add Photo" }
</button>
</div>
</div>
);
}
};
ReactDOM.render(
<TweetBox />,
document.getElementById("container")
);
View Compiled
