/
app.js
73 lines (61 loc) · 1.9 KB
/
app.js
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
class App extends React.Component {
constructor() {
super();
// Setting up initial state
this.state = {
data: [],
loading: true,
searchString: '',
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({ searchString: e.target.value });
}
componentWillMount() {
fetch('http://localhost/drupal8/api/articles')
.then(result=>result.json())
.then(data=>this.setState({
loading: false,
data: data,
}));
}
render() {
var data = this.state.data;
//console.log(data);
let searchString = this.state.searchString.trim().toLowerCase();
if (searchString.length > 0) {
// We are searching. Filter the results.
data = data.filter(function (l) {
return l.title[0].value.toLowerCase().match(searchString);
});
}
return (
<section className="container articles">
<div className="row">
<div className="col-md-6">
<h1 className="title">DRUPAL 8 REACT CONTENT</h1>
<input type="text" value={this.state.searchString} onChange={this.handleChange} />
{data.map(function (l) {
return (
<article key={l.nid[0].value}>
<h1>{l.title[0].value}</h1>
<img src={l.field_image[0].url} />
<p>DangerouslySetInnerHTML</p>
<div dangerouslySetInnerHTML={{ __html: l.body[0].value }} />
<p>Pure data print</p>
<p>{l.body[0].value}</p>
</article>
);
})}
</div>
</div>
</section>
);
}
}
// rendering into the DOM
ReactDOM.render(
<App />,
document.getElementById('container')
);