دورة react js للمبتدئين الدرس العاشر


فهاد الدرس العاشر من دورة react js للمبتدئين غادي نشوفوا ل event onClick من بعد ماشفنا onChange فالدرس السابق.
فغادي نزيدو الإمكانية للمستخدم انه يمسح خبر منبعد ما يضغط على زر خاص بالحذف.


1- إضافة كود الحذف

فل component index.js غادي نزيد fonction سميتها removeItem لي كتاخد ل index ديال ل item لي هو الخبر لي غادي نحذف من بعد ما نضغط على زر الحذف الخاص به.
منبعد كنسترجع ل array data وكنخدم ب spread opérateur لي شفنا قبل باش كنزيد المحتوى ف variable سميتها oldData منبعد كنحذف لخبر بل index ديالو وكنرسل لقيمة ديال oldData ل data.

منبعد كنرسل ل fonction removeItem ل component news 
فالكود لي زدنا ف index.js هو :

 

                                //
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

منبعد ف news.js كنسترجع ل fonction removeItem من ل props وكنرسلها ل component news_item.js.

الكود لي زدنا هو :

                                //
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- إضافة زر الحذف

فل component news_item كنزيد الزر ديال الحذف وكنزيدلو ل event onClick يعني ملي نضغط عليه كتنفذ ل fonction removeItem لي كنعطيها ل index ديال ل item لي هو الخبر.

فيلا مشيتي للمتصفح ديالك غادي تلقى النتيجة :



بعد الضغط على الزر الأحمر غادي تحذف لخبر لي بغيتي فالكود لي زدنا ف news_item.js هو :

                                //
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;