add select

src/App.js

@@ -2,31 +2,48 @@ import React, { Component } from "react";
 
 import Counter from "./counter";
 
+import List from "./select";
+
+const fakeArr = [
+	{ id: 0, value: 0, text: "Text 1" },
+	{ id: 1, value: 1, text: "Text 2" },
+	{ id: 2, value: 2, text: "Text 3" },
+	{ id: 3, value: 3, text: "Text 4" }
+];
+
 export default class App extends Component {
 	constructor(props) {
 		super(props);
-		console.log("constructor");
+		// console.log("constructor");
 		this.state = {
 			counter: 0,
 			id: null,
 			time: new Date().toLocaleTimeString(),
-			random: 0
+			random: 0,
+			value: "Hello",
+			textareaValue: "",
+			checked: false,
+			valueForSelect: 0,
+			fakeArr: fakeArr,
+			valueForList: fakeArr[0].value
 		};
+
+		this.handleChange = this.handleChange.bind(this);
 	}
 
 	tick = () => this.setState({ time: new Date().toLocaleTimeString() });
 
-	UNSAFE_componentWillMount() {
-		console.log("componentWillMount");
-	}
+	// UNSAFE_componentWillMount() {
+	// console.log("componentWillMount");
+	// }
 
 	static getDerivedStateFromProps(nextProps, prevState) {
-		console.log("getDerivedStateFromProps");
+		// console.log("getDerivedStateFromProps");
 		return null;
 	}
 
 	async componentDidMount() {
-		console.log("componentDidMount");
+		// console.log("componentDidMount");
 
 		const id = setInterval(this.tick, 1000);
 		console.log("id", id);
@@ -34,37 +51,89 @@ export default class App extends Component {
 	}
 
 	componentWillUnmount() {
-		console.log("componentWillUnmount");
+		// console.log("componentWillUnmount");
 		clearInterval(this.state.id);
 	}
 
 	shouldComponentUpdate(nextProps, nextState, nextContext) {
-		console.log("shouldComponentUpdate");
+		// console.log("shouldComponentUpdate");
 		return true;
 	}
 
 	getSnapshotBeforeUpdate(prevProps, prevState) {
-		console.log("getSnapshotBeforeUpdate");
+		// console.log("getSnapshotBeforeUpdate");
 		return null;
 	}
 
 	async componentDidUpdate(prevProps, prevState, snapshot) {
-		console.log("componentDidUpdate");
+		// console.log("componentDidUpdate");
+		// if (prevState.counter !== this.state.counter) {
+		// 	console.log("random");
+		// 	this.random();
+		// }
 	}
 
-	inc = () => this.setState(prevState => ({ counter: prevState.counter + 1 }));
+	inc = () =>
+		this.setState(prevState => ({
+			counter: this.random() === 5 ? prevState.counter * 2 : prevState.counter + 1
+		}));
+
 	dec = () => this.setState(prevState => ({ counter: prevState.counter - 1 }));
 
 	random = () => this.setState({ random: Math.floor(Math.random() * 10 + 1) });
+	random = () => Math.floor(Math.random() * 10 + 1);
+
+	handleChange(e) {
+		this.setState({ value: e.target.value });
+	}
+
+	onBlur = e => console.log("onBlur");
+	onFocus = e => console.log("onFocus");
+
+	handleChangeTA = e => this.setState({ textareaValue: e.target.value });
+
+	handleChangeCH = e => this.setState({ checked: e.target.checked });
+
+	handleSelectChange = e => this.setState({ valueForSelect: e.target.value });
+
+	changeListValue = id =>
+		this.setState(prevState => ({
+			...prevState,
+			valueForList: prevState.fakeArr.find(el => el.value === id).value
+		}));
 
 	render() {
+		console.log("random", this.state.random);
 		return (
 			<div>
-				<button onClick={this.random}>Random</button>
-
-				<Counter counter={this.state.counter} inc={this.inc} dec={this.dec} random={this.state.random} />
-
-				<h1>Date now {this.state.time}</h1>
+				<input
+					type="text"
+					onBlur={this.onBlur}
+					onFocus={this.onFocus}
+					value={this.state.value}
+					onChange={this.handleChange}
+				/>
+				<textarea value={this.state.textareaValue} onChange={this.handleChangeTA} />
+				<input type="checkbox" checked={this.state.checked} onChange={this.handleChangeCH} />
+				<div>
+					<p>Ваш выбор: {this.state.valueForSelect}</p>
+					<select value={this.state.valueForSelect} onChange={this.handleSelectChange}>
+						<option value="0">Язык HTML</option>
+						<option value="1">Язык CSS</option>
+						<option value="2">Язык JavaScript</option>
+						<option value="3">Язык PHP</option>
+					</select>
+				</div>
+
+				<input type="file" onChange={e => console.log("e", e.target.files)} />
+
+				<div>
+					<List
+						options={this.state.fakeArr}
+						value={this.state.valueForList}
+						onChange={this.changeListValue}
+					/>
+				</div>
 			</div>
 		);
 	}

src/counter.js

@@ -1,22 +1,28 @@
 import React, { Component } from "react";
 
 export default class Counter extends Component {
+	// state = { count: 0 };
 	componentDidMount() {
 		console.log("componentDidMount child");
+		// this.setState({ count: this.props.counter });
 	}
 
-	shouldComponentUpdate(nextProps) {
-		if (nextProps.random === 10) {
-			console.log("BOOOM");
+	// componentDidUpdate(prevProps) {
+	// 	if (this.props.counter !== prevProps.counter) this.setState({ count: this.props.counter });
+	// }
 
-			return false;
-		}
+	// shouldComponentUpdate(nextProps) {
+	// 	if (nextProps.random === 10) {
+	// 		console.log("BOOOM");
 
-		return true;
-	}
+	// 		return false;
+	// 	}
+
+	// 	return true;
+	// }
 
 	render() {
-		const { counter, inc, dec } = this.props;
+		const { dec, inc, counter } = this.props;
 		return (
 			<div>
 				<button onClick={inc}>in-crease</button>

src/select.js

@@ -0,0 +1,25 @@
+import React, { Component } from "react";
+
+export default class List extends Component {
+	state = { show: false };
+
+	trigger = () => this.setState(prevState => ({ show: !prevState.show }));
+
+	render() {
+		const { onChange, value, options } = this.props;
+		return (
+			<div>
+				<div onClick={this.trigger}>{value}</div>
+				{this.state.show && (
+					<ul>
+						{options.map(el => (
+							<li key={el.id} onClick={onChange.bind(null, el.value)}>
+								{el.text}
+							</li>
+						))}
+					</ul>
+				)}
+			</div>
+		);
+	}
+}