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


فهاد الدرس التاسع من دورة react js للمبتدئين غادي نكملو الدورة ديالنا فهاد الدرس غادي يكون تتمة للدرس السابق غادي نديرو تغييرات على ل fonction onInputChange باش ندير البحث فل array data ونعرض الأخبار على حسب القيمة ديال البحث.


1- إضافة array filtred ف state

ف state بجانب ل array data غادي نزيد array filtred خاوية فيها غادي يكونوا المعلومات لي كتطابق البحث.

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

                                //
    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 : []
    };
                            

2- إضافة تغيير على ل fonction onInputChange

فل fonction onInputChange كندير تغيير فكنخزن القيمة لي دخلنا فالحقل ديال البحث ف variable search منبعد كنخدم بل méthode filter لي شفنا فالمقدمة ديال الدورة لي كنبحث بها على title لي كيساوي القيمة ديال البحث.

منبعد النتيجة كنزيدها فل filter array لي زدنا وباستخدام setState لي هي ل méthode لي كتمكنا باش نغيروا القيم لي عندنا ف state.

فالكود لي زدنا فل fonction onInputChange هو :


                                //
  onInputChange = (event)=>{
        let search = event.target.value;
        const filtred = this.state.data.filter((item)=>{
            return item.title.indexOf(search) > -1;
        });
        this.setState({
            filtred 
        });
    }
                            

3- عرض الأخبار باستعمال ل filter

فباش نعرض الأخبار بل filter لي زدنا غادي ندير تغيير على data لي كنرسل ل news فغادي نتحقق يلا كانت ل filter خاوية غادي نرسل ل array data ويلا كان العكس فكنرسل ل array filter.

فيلا مشيتي للمتصفح ودخلتي lore فالحقل غادي تحصل على النتيجة:






الكود ديال 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 
        });
    }
    render(){
        return(
            <div className="container">
                <Search search={this.onInputChange}/>
                <News data={this.state.filtred.length > 0 ? this.state.filtred : this.state.data}/>
            </div>
        )
    }
};

ReactDOM.render(<App/>,document.querySelector('#root'));