react_prac/updateAndRemoveNotes.html at master · saikiran939/react_prac · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<html>
<head>

 <script src="https://fb.me/react-15.2.1.js"></script>
 <script src="https://fb.me/react-dom-15.2.1.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
<title> ES6 Stateless component!</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>

<div id="react-container">
</div>


<script type="text/babel">
		var Note = React.createClass({
			getInitialState(){
				return {editing:false};
			},
			save(){
				this.props.onChange(this.refs.saveText.value, this.props.id);
				this.setState({editing:false});
			},
			edit(){
				this.setState({editing:true});
			},
			remove(){
				this.props.onRemove(this.props.id);
				this.setState({editing:false});
			},

			renderForm(){
				return (
						<div className="note">
							<textarea ref="saveText"> </textarea>
							<button onClick={this.save}>SAVE</button>
						</div>
				)
			},

			renderNote(){
				return (	<div className="note">
								<p>{this.props.children}</p>
								<span>
									<button onClick={this.edit}>EDIT</button>
									<button onClick={this.remove}>X</button>
								</span>
							</div>
					)
			},

			render(){
				return (this.state.editing) ? this.renderForm(): this.renderNote();
			}
		});

		var Board = React.createClass({
				propTypes:{
					count: function(props, propName){
							if(typeof props[propName] != "number"){
								return Error("Count must be a number");
							}

						if(props[propName] > 100){
							return new Error("cannot support that many notes");
						}
					}

				},

				getInitialState(){
					return {
							notes: [
										{id: 0, note: "Call Sai"},
										{id: 1, note: "Eat lunch"},
										{id: 2, note: "Get Chalk"},
										{id: 3, note: "Sleep Well"}

									]
					}
				},

				update(newText, id){
					var notes = this.state.notes.map(
						note => (note.id !== id) ? note: {
														  ...note,
														  note: newText
														}
					)

					this.setState({notes});
				},

				remove(id){

					var notes = this.state.notes.filter(note => (note.id !== id));
					this.setState({notes});
				},

				eachNote(note){
					return (<Note key={note.id} id={note.id} onChange={this.update} onRemove={this.remove}> {note.note} </Note>
						);
				},

				render(){
					return (<div className="Board">
								{this.state.notes.map(this.eachNote)}
							</div>)
				}

		});

		ReactDOM.render(<Board count={10}/>,
                document.getElementById('react-container'))

</script>

</body>

</html>xx