دورة react js للمبتدئين الدرس العاشر
1- إضافة كود الحذف
//
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import News from './components/news';
import Search from './components/search';
class App extends Component {
state = {
data : [
{
'title': 'lorem ipsum',
'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla risus elit, vel semper enim auctor sed. Nunc consequat arcu vel lectus tempor feugiat. Aliquam ut hendrerit urna, vel placerat sapien. Suspendisse fringilla est sit amet mi laoreet, vitae dictum turpis lacinia. Sed sagittis cursus est, sit amet porttitor nisi.'
},
{
'title': 'vitae dictum turpis lacinia',
'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla risus elit, vel semper enim auctor sed. Nunc consequat arcu vel lectus tempor feugiat. Aliquam ut hendrerit urna, vel placerat sapien. Suspendisse fringilla est sit amet mi laoreet, vitae dictum turpis lacinia. Sed sagittis cursus est, sit amet porttitor nisi.'
},
{
'title': 'consectetur adipiscing',
'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla risus elit, vel semper enim auctor sed. Nunc consequat arcu vel lectus tempor feugiat. Aliquam ut hendrerit urna, vel placerat sapien. Suspendisse fringilla est sit amet mi laoreet, vitae dictum turpis lacinia. Sed sagittis cursus est, sit amet porttitor nisi.'
},
{
'title': 'Duis fringilla risus elit',
'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla risus elit, vel semper enim auctor sed. Nunc consequat arcu vel lectus tempor feugiat. Aliquam ut hendrerit urna, vel placerat sapien. Suspendisse fringilla est sit amet mi laoreet, vitae dictum turpis lacinia. Sed sagittis cursus est, sit amet porttitor nisi.'
}
],
filtred : []
};
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- استرجاع ل fonction removeItem
//
import React from 'react';
import NewsItem from './news_item';
const News = (props) => {
return(
<table className="table table-hover">
<thead>
<tr>
<th>Titre</th>
<th>Description</th>
</tr>
</thead>
<NewsItem removeItem={props.removeItem} news={props.data}/>
</table>
);
};
export default News;
3- إضافة زر الحذف
//
import React from 'react';
const NewsItem = (props) =>{
const showData = () =>{
return props.news.map((item,index)=>{
return(
<tr key={index}>
<td>{item.title}</td>
<td>{item.body}</td>
<td><button className="btn btn-sm btn-danger" onClick={()=>props.removeItem(index)}>X</button></td>
</tr>
);
});
}
return(
<tbody>
{showData()}
</tbody>
);
};
export default NewsItem;