Skip to content

Instantly share code, notes, and snippets.

@EmperorEarth

EmperorEarth/Chat.js

Last active July 26, 2020 17:02
Show Gist options
  • Save EmperorEarth/90e9f43957a1d4e80d04ce63c50273ef to your computer and use it in GitHub Desktop.
Save EmperorEarth/90e9f43957a1d4e80d04ce63c50273ef to your computer and use it in GitHub Desktop.
Download ZIP
learn-react-component-state
Raw
Chat.js
import React from "react";
class App extends React.Component {
render() {
return (
<div style={{ display: "flex", flexDirection: "row" }}>
<Status />
<Conversation />
</div>
);
}
}
export default App;
class Status extends React.Component {
render() {
return (
<div style={{ display: "flex", flexDirection: "row" }}>
<div
onClick={this._onClick}
style={{
backgroundColor: this.state.online ? "green" : "gray",
borderRadius: 12,
height: 24,
width: 24,
}}
></div>
{this.state.online ? "Online" : "Invisible"}
</div>
);
}
constructor() {
super();
this.state = {
online: true,
};
this._onClick = this._onClick.bind(this);
}
_onClick() {
this.setState({ online: !this.state.online });
}
}
class Conversation extends React.Component {
render() {
return (
<div>
<input type="text" value={this.state.value} onChange={this._onChange} />
<input type="Submit" value="Send" />
</div>
);
}
constructor() {
super();
this.state = {
value: "",
};
this._onChange = this._onChange.bind(this);
}
_onChange(event) {
this.setState({ value: event.target.value });
}
}
Raw
rainbow.js
import React from "react";
class App extends React.Component {
render() {
return (
<div style={{ display: "flex", flexDirection: "row" }}>
<div>
<div
style={{
height: 700,
width: 700,
backgroundColor: this._colors[this.state.index],
}}
/>
<ul
style={{
display: "flex",
margin: 0,
padding: 0,
flexDirection: "row",
listStyleType: "none",
}}
>
{this._colors.map(this._renderColor)}
</ul>
</div>
<div>
<button
onClick={this._onClickPrevious}
disabled={this.state.index === 0}
>
{"<<"}
</button>
<button onClick={this._onClickNext} disabled={this.state.index === 6}>
{">>"}
</button>
</div>
</div>
);
}
constructor() {
super();
this._colors = [
"red",
"orange",
"yellow",
"green",
"blue",
"indigo",
"violet",
];
this.state = {
index: 0,
};
this._onClickPrevious = this._onClickPrevious.bind(this);
this._onClickNext = this._onClickNext.bind(this);
this._renderColor = this._renderColor.bind(this);
this._handleClick = this._handleClick.bind(this);
}
_onClickPrevious() {
this.setState({ index: this.state.index === 0 ? 0 : this.state.index - 1 });
}
_onClickNext() {
this.setState({ index: this.state.index === 6 ? 6 : this.state.index + 1 });
}
_renderColor(_, index) {
return (
<Palette
key={index}
selected={this.state.index === index}
color={this._colors[index]}
onClick={() => this._handleClick(index)}
/>
);
}
_handleClick(index) {
this.setState({ index });
}
}
export default App;
class Palette extends React.Component {
render() {
return (
<div>
<li
onClick={this.props.onClick}
style={{
height: 250,
width: 100,
backgroundColor: this.props.color,
border: this.props.selected && "1px solid black",
}}
></li>
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment