دورة react js للمبتدئين الدرس الحادي عشر
1- ل méthode componentWillMount
//
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import News from './components/news';
import Search from './components/search';
import axios from 'axios';
class App extends Component {
state = {
data : [],
filtred : []
};
componentWillMount(){
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response =>{
console.log(response.data);
});
}
onInputChange = (event)=>{
let search = event.target.value;
const filtred = this.state.data.filter((item)=>{
return item.title.indexOf(search) > -1;
});
this.setState({
filtred
});
}
removeItem = (index) => {
let oldData = [...this.state.data];
oldData.splice(index, 1);
this.setState({data: oldData});
}
render(){
return(
<div className="container">
<Search search={this.onInputChange}/>
<News removeItem={this.removeItem} data={this.state.filtred.length > 0 ? this.state.filtred : this.state.data}/>
</div>
)
}
};
ReactDOM.render(<App/>,document.querySelector('#root'));
2- عرض les articles من ل api
فباش نعرض les articles كيكفي باش ندير تعديل على state ونرسلها لمعلومات لي استرجعت من response فغادي نمشي للصفحة الرئيسية غادي نلقى المحتوى تغير وغادي تبقى إمكانية الحذف والبحث كيف ما كانت قبل.
فالتغيير لي درنا ف index.js هو :
//
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import News from './components/news';
import Search from './components/search';
import axios from 'axios';
class App extends Component {
state = {
data : [],
filtred : []
};
componentWillMount(){
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response =>{
this.setState({
data : response.data
});
});
}
onInputChange = (event)=>{
let search = event.target.value;
const filtred = this.state.data.filter((item)=>{
return item.title.indexOf(search) > -1;
});
this.setState({
filtred
});
}
removeItem = (index) => {
let oldData = [...this.state.data];
oldData.splice(index, 1);
this.setState({data: oldData});
}
render(){
return(
<div className="container">
<Search search={this.onInputChange}/>
<News removeItem={this.removeItem} data={this.state.filtred.length > 0 ? this.state.filtred : this.state.data}/>
</div>
)
}
};
ReactDOM.render(<App/>,document.querySelector('#root'));
3- ل méthode componentDidMount
//
componentDidMount(){
console.log('mounted');
}