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


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

المهم هنا هو نتعلم كيفاش نخدم بل méthode filter وأيضا كيفاش نرسل المعلومات من component fils ل component parent.


1- إضافة ل component ديال البحث

فغادي نمشي ل dossier components تما غادي نزيد component نسميه search.js فيه غادي نزيد input text لي غادي تمكن من البحث فالأخبار لي غادي تكون فل array data.

الكود ديال search.js هو :

                                //
import React from 'react';


const Search = () => {
    return(
        <div className="row mt-4">
            <div className="col-md-12">
                <input type="text" className="form-control"/>
            </div>
        </div>
    )
};


export default Search;
                            

2- استرجاع وعرض ل component search.js

ف index.js كنسترجع ل component Search منبعد كنعرضوا فوق ل 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.'
            }
        ],
    };
    render(){
        return(
            <div className="container">
                <Search/>
                <News data={this.state.data}/>
            </div>
        )
    }
};

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

3- استرجاع القيمة من حقل البحث

باش نسترجع القيمة لي دخلنا فالحقل زدت fonction ف index.js سميتها onInputChange لي كتاخد event وداخلها فقط كنعرض القيمة ديال ل event.

فل event هنا هو فاش كنكتب فالحقل والقيمة ديالو هي القيمة لي كندخل منبعد كنرسل ل fonction ل component Search لي غادي يستقبلها.

الكود لي زدنا ف 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.'
            }
        ],
    };
    onInputChange = (event)=>{
        console.log(event.target.value);
    }
    render(){
        return(
            <div className="container">
                <Search search={this.onInputChange}/>
                <News data={this.state.data}/>
            </div>
        )
    }
};

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

4- استقبال ل méthode ف search.js

فل component search.js كنستقبل ل méthode منبعد فل event onChange لي كيعني فاش كنبدا نكتب كنفذ ل méthode ولي كتعرض القيمة لي دخلت فل console كيف كنشوف فالصورة :




الكود لي زدنا ف search.js هو :

                                    //
import React from 'react';


const Search = (props) => {
    return(
        <div className="row mt-4">
            <div className="col-md-12">
                <input type="text" onChange={props.search} className="form-control"/>
            </div>
        </div>
    )
};


export default Search;