Reactjs Map Arrays with Filter Working Demo

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Map Arrays with Filter Working Demo.

---

For reactjs new comers, please check the below link:

Reactjs Basic Tutorials

Friends now I proceed onwards and here is the working code snippet and please use this carefully to avoid the mistakes:

1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

npx create-react-app reacthooks

cd reacthooks

npm start

2. (Optional, I have used for better looks of table)Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

npm install bootstrap --save

npm start //For start project again

3. Finally for the main output, we need to add below code into our reacthooks/src/App.js file or if you have fresh setup then you can replace reacthooks/src/App.js file code with below code:

import React from "react";
//Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';

export default function App() {
  var data = [{ id: 1, name: 'Mike', city: 'philps', state: 'New York' }, 
  { id: 2, name: 'Steve', city: 'Square', state: 'Chicago' }, 
  { id: 3, name: 'Jhon', city: 'market', state: 'New York' }, 
  { id: 4, name: 'philps', city: 'booket', state: 'Texas' }, 
  { id: 5, name: 'smith', city: 'brookfield', state: 'Florida' }, 
  { id: 6, name: 'Broom', city: 'old street', state: 'Florida' }];

  //Fiter data accroding to selected city
  data = data.filter(data => data.state == "New York");
  
 
  return (
    <div className="app container p-5">
      <h1 className="text-center mb-5">Therichpost.com</h1>
      <table class="table table-hover table-bordered p-5">
        <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">City</th>
            <th scope="col">State</th>
          </tr>
        </thead>
        <tbody>
        {data.map(function({id, name, city, state}){
         
              return (
                <tr>
               
                <td>{id}</td>
                <td>{name}</td>
                <td>{city}</td>
                <td>{state}</td>
              </tr>
                );
            })}

            
            </tbody>
            </table>
            
       </div>
  );
}

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks