Loading . . .

Introduction to Mastering ReactJS

Getting Started with ReactJS

Understanding Components in ReactJS

Handling Events in ReactJS

Managing State and Props in ReactJS

Component Lifecycle and Hooks in ReactJS

JSX & Conditional Rendering in ReactJS

Styling React Components

Fragments & Lists in ReactJS

Disclaimer: Educational Purposes Only

The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.

The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.

Download Notes

Fragments & Lists in ReactJS

Key Topics Covered:

1) Working with Fragments: Discover how Fragments can streamline your component structure without cluttering the DOM.

2) Using the map() method: Learn how to dynamically render lists of components by harnessing the power of the map() method in JavaScript.

3) Key prop and its significance: Understand the importance of the key prop for efficient list rendering, and see how it optimizes React's update process.

4) Efficient list rendering: Gain insights into React's reconciliation algorithm and best practices for rendering and updating lists.

Fragments & Lists in ReactJS

Updated App.js File:

App.js


import React from 'react';

const CompWOFragment = () => {
    return (
        <div>
            {/* <Something />
            <SomethingTwo />
            <SomethingThree /> */}
        </div>
    )
};

const CompWFragment = () => {
    return (
        <>
            {/* <Something />
            <SomethingTwo />
            <SomethingThree /> */}
        </>
    )
};

const items = ['items 1', 'items 2', 'items 3'];

const ListComp = () => {
    return (
        <ul>
            {items.map((item) => (
                <li key={item}>{item}</li>
            ))}
        </ul>
    );
};

const users = [{ "key": 1, "name": 'user 1' }, { "key": 2, "name": 'user 2' }];

const UserList = ({ users }) => {
    return (
        <ul>
            {users.map((user) => (
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
    );
};

const productslist = [{ "key": 1, "name": 'prod 1', "price": 123 }, { "key": 2, "name": 'prod 2', "price": 456 }];

const ProductList = ({ products }) => {
    return (
        <>
            <h2>Product List</h2>
            <ul>
                {products.map((product) => (
                    <li key={product.id}>{product.name} - {product.price}</li>
                ))}
            </ul>
        </>
    );
}

function App() {
    return (<div><ProductList products={productslist} /></div>);
}

export default App;