Creating a ListGroup Component in react

Note: I have used Bootstrap here, (Bootstrap is a very popular CSS library that gives us a bunch of CSS classes for styling our application)

To install Bootstrap in your program run the command : npm install or i(short for install) bootstrap

After this you have to import bootstrap in your main.tsx file :

import 'bootstrap/dist/css/bootstrap.css'

After this create a folder by name: components (by convention you put all of your components under the component folder)

After importing listgroup component from Bootstrap you will get some errors in the naming of the <ul class> and <li class> as class is a reserved keyword in javascript and typescript.

<ul className="list-group">
    <li className="list-group-item">An item</li>
    <li className="list-group-item">A second item</li>
    <li className="list-group-item">A third item</li>
    <li className="list-group-item">A fourth item</li>
    <li className="list-group-item">And a fifth one</li>
  </ul>

NOTE: A component cannot return more than one element.

function myComponent() {
    return (

        <h1>Fragments</h1> //this will give error , and evetually be compiled as JS and run as React.createElement('h1')



    <ul className="list-group">
        <li className="list-group-item">An item</li>
        <li className="list-group-item">A second item</li>
        <li className="list-group-item">A third item</li>
        <li className="list-group-item">A fourth item</li>
        <li className="list-group-item">And a fifth one</li>
    </ul> .. // this whole will give error as you cannot return more than one element ina component
    )
}

export default myComponent;

To solve this problem you can use : select the desire code from <h1> to </ul> tag then click on view option click on (command palette) and then a dialog box will display write (wrap) an option will apper [wrap with abbreviation] click on that and write <div> tag but using <div> tag will you simlply including an extra tag, instead this you can use FRAGMENTS.

with this change you are not adding an extra element in the DOM like <div> when rendered on the screen.

One more better way is to not use fragment , use an empty tag instead.

OUTPUT:

But these items are hard-coded in our markup, to make them rendered dynamically

Here comes: Rendering list items dynamically

NOTE: In jsx we do not have for loop to render items.

You know that in JavaScript we use map to render over array.

Note: remember to wrap the items.map(item => (<li>{item}</li>)) with curly braces as to

Rendering list items dynamically

function MyComponent() {

    const items = [
        'new york',
        'london',
        'spain',
        'paris',
        'greece'
    ];




    return (

        <>
            <h1>Rendering list items dynamically</h1>



                <ul className="list-group">
                    {items.map(item => (
                    <li>{item}</li>
                    ))}
                </ul>
        </>
    );
}

export default MyComponent;

function MyComponent() {

    const items = [
        'new york',
        'london',
        'spain',
        'paris',
        'greece'
    ];




    return (

        <>
            <h1>Rendering list items dynamically</h1>



                <ul className="list-group">
                    {items.map(item => (
                    <li key ={item}>{item}</li>
                    ))}
                </ul>
        </>
    );
}

export default MyComponent;

Conditional rendering :

notice I have changed the keyword from const to let here.

NOTE: but we cannot write an if statement inside a JSX code as only HTML elements and other react components but with {} curly braces you can render anything dynamically.

or you can put this expression under a const variable and then use that variable under the JSX code.

This is just a cleaner way to do the same thing.