Ninja - React Basic 11 - Reuse Components

Let's reuse this componet we use. We already use to show the values in the 'blogs'

Now we need to show the values filter by author='mario'

let's see how are going to use this.

1. let's create a new div tag below.

<BlogList blogs={blogs} title="Mario's Blogs"/>

2. we can use filter

<BlogList blogs={blogs.filter()} title="Mario's Blogs"/>

3. Then, this filter method will call a call back function for each otem in  the array

<BlogList blogs={blogs.filter(  ()= {} )} title="Mario's Blogs"/>

a.) if true keeps in the array

b.) if false, filters outof the array

c.) and return new array with only filtered true values

4. Then passing that 'data' as a  prop.

if we show the original data

const [blogs, setBlogs] = useState([

        { title: 'My new website', body: 'lorem ipsum...', author: 'mario', id: 1 },

        { title: 'Welcome party!', body: 'lorem ipsum...', author: 'yoshi', id: 2 },

        { title: 'Web dev top tips', body: 'lorem ipsum...', author: 'mario', id: 3 }

    ]);

5. take 'blog' as arguemnt for filter

<BlogList blogs={blogs.filter(  (blogs)= {} )} title="Mario's Blogs"/>

6. check author=mario

<BlogList blogs={blogs.filter( (blog) => blog.author==='mario' )} title="Mario's Blogs"/>