-->

  • How to use map function in reactjs ?

     


    how to use map function in reactjs ?




    Today in this blog, we will aware about map function means we are used to data mapping using reactjs map() function. So, without wasting any time lets do it but lets recap what is exactly React js. 




    React



    Certainly! ReactJS is a JavaScript library developed by Facebook for building user interfaces. It allows developers to create reusable UI components and efficiently manage the state of their applications. Here are some key aspects of ReactJS:
     

    Component-Based Architecture: ReactJS follows a component-based architecture, where the user interface is divided into small, reusable components. Components encapsulate their own logic, state, and rendering, making it easier to build and maintain complex user interfaces.
     

    Virtual DOM: ReactJS uses a virtual representation of the DOM (Document Object Model), known as the Virtual DOM. When the state of a component changes, React updates the Virtual DOM.

     

    JSX: JSX is a syntax extension for JavaScript used in React. It allows developers to write HTML-like code within JavaScript, making it easier to describe the structure and appearance of components. JSX code is transpiled to regular JavaScript using tools like Babel before being executed in the browser.


     

    Hooks: React introduced Hooks in version 16.8 as a way to use state and other React features in functional components. Hooks allow developers to write reusable logic and manage state within functional components without the need for class components. The most commonly used hooks are useState for managing state and useEffect for handling side effects such as fetching data or subscribing to events.

     

    React Router: React Router is a popular routing library for React applications. It enables developers to create single-page applications with multiple views and handles routing between different components based on the URL.
     


    State Management: React provides a flexible ecosystem of state management solutions. While React's built-in state management (useState ) is suitable for managing local component state, more complex applications may benefit from additional state management libraries like Redux. These libraries help manage global application state and provide predictable ways to update and access the state.


    ReactJS has gained widespread popularity due to its performance, reusability, and declarative approach to building user interfaces. It has large community. 





    NOTE - Here we will Tailwind CSS for designing.



    Map function 



    The map() function is a higher-order function in JavaScript that is used to transform elements of an array. It creates a new array by calling a provided function on each element of the original array and storing the results in the new array. The original array remains unchanged.




    Here we are two file so one of the name is Data.jsx, in this file we have a data like name, rollno, class etc  and at the end of the code in this file we will export like ( export default Users; ) just because of we can import this file in another file for data mapping in our program.


    Data.jsx


      const Users=[
    {
        "name":"Akku",
        "rollNo":"123"
    },
    {
        "name":"Khushboo",
        "rollNo":"124"
    },
    {
        "name":"Atul",
        "rollNo":"125"
    },{
        "name":"Khushi",
        "rollNo":"126"
    },
    {
        "name":"Golu",
        "rollNo":"127"
    
    },
    {
        "name":"Atul",
        "rollNo":"128"
    },
    ]
    export default Users;


    Now, we will create another file called Themap.jsx  


    import Users from "../components/Data"
  
function Themap() {
 
  return (
    <div>
    <div>
     
     {Users.map((e) => {
        console.log(Users);
        return (
 
           <ul  className='m-10 pt-3 pb-3 pl-5  pr-5 border-2 border-black'>
          
            <li>{e.name}</li>
            <li>{e.rollNo}</li>
            
           </ul>
        );
     })}
 
    </div> 
    </div>
 
  )
}

export default Themap


    Lets explain whats going here so there is some little bit code like import the data.jsx file, import react from "react", and most of the important
    thing that we are using funcitonal component in this react program apart form that we can use also class component but we only used here functional component
    so lets go ahead.




    # The import React from 'react' statement imports the necessary dependencies for a React component.

    # The import Users from "../components/Data" statement imports a module or file named Users from the "../components/Data" directory. It is assumed that this file contains an array of user data.

    # The Themap function is the main component function. It returns JSX elements that will be rendered to the DOM.

    # Inside the component's return statement, the Users.map() method is used to iterate over each element in the Users array.

    # For each element (e) in the Users array, a JSX code block is returned. It renders a <ul> element with the class names "m-10 pt-3 pb-3 pl-5 pr-5 border-2 border-black" and two list items <li> containing the name and rollNo properties of the current element (e).
    # The rendered JSX code blocks are then rendered within a parent <div> element.
    # The Themap component is exported as the default export of the module, making it available for other parts of the application to import and use.



    At the end we will call Themap.jsx file in app.jsx 





    Output







    Disclaimer


    All tutorials are for informational and educational purposes only and have been made using our own routers, servers, websites and other vulnerable free resources. we do not contain any illegal activity. We believe that ethical hacking, information security and cyber security should be familiar subjects to anyone using digital information and computers. Hacking Truth is against misuse of the information and we strongly suggest against it. Please regard the word hacking as ethical hacking or penetration testing every time this word is used. We do not promote, encourage, support or excite any illegal activity or hacking. 



    • 0 comments:

    Post a Comment

    For Any Tech Updates, Hacking News, Internet, Computer, Technology and related to IT Field Articles Follow Our Blog.