Working with lists

Today going make a preview list of users.

After creating a new project

src/App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;JavaScript

JavaScript

We need to remove everything inside of return function.
And replacing import ‘./App.css’ to import ‘./main.css’ and removing import logo line completely, we going create a new custom style. we aren’t going need that logo.

src/App.js

import './main.css';

function App() {
    return (
        
    );
}

export default App;

JavaScript

New we going to create a new function for the title for the page, using title as key to store value when calling the function and new it’s creates a header with title prop

src/App.js

import './main.css';

function Header({title}){
    return (
        <header>
            {title}
        </header>
    )
}

function App() {
    return (
        <div>
          <Header title="List of Users" />
        </div>
    );
}

export default App;

JavaScript

Now in our created main.css we going added some code to it, we going use

src/main.css

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #333;
    color: #ffffff;
    font-weight: 300;
    font-family: "Lora", serif;
}

CSS

src/App.js

import './main.css';

function Header({title}){
    return (
        <header>
            {title}
        </header>
    )
}

function Users() {
    let UsersList = [
        {
            id: 1,
            firstname: 'Bob',
            lastname: 'Marley',
            bio: 'Bob Marley like\'s PHP.',
            age: 40,
            isHappy: true
        },
        {
            id: 2,
            firstname: 'John',
            lastname: 'Doe',
            bio: 'John Doe like\'s JS.',
            age: 22,
            isHappy: false
        }
    ];

    return(
        <div>
            {UsersList.map((user) => (
                <div>
                    <h3>{user.firstname} {user.lastname}: {user.age}</h3>
                    <p>{user.bio}</p>
                    <b>{user.isHappy ? 'Happy : D' : 'Not happy'}</b>
                </div>
            ))}
        </div>
    )
}

function App() {
    return (
        <div>
            <Header title="List of Users"   />
            <Users />
        </div>
    );
}

export default App;

JavaScript

Let’s make our separate our functions to a different files

let’s create a folder called components we going store reusable functions, all and inside the that folder create files Called Users.js and Header.js

src/App.js

import './main.css';

import Users from './components/Users'
import Header from './components/Header'

function App() {
    return (
        <div>
            <Header title="List of Users"/>
            <main>
                <Users />
            </main>
        </div>
    );
}


export default App;

JavaScript

src/components/Header.js

function Header({title}){
    return (
        <header>
            {title}
        </header>
    )
}

export default Header;

JavaScript

src/components/Users.js

function Users() {
    let UsersList = [
        {
            id: 1,
            firstname: 'Bob',
            lastname: 'Marley',
            bio: 'Bob Marley like\'s PHP.',
            age: 40,
            isHappy: true
        },
        {
            id: 2,
            firstname: 'John',
            lastname: 'Doe',
            bio: 'John Doe like\'s JS.',
            age: 22,
            isHappy: false
        }
    ];

    return(
        <div>
            {UsersList.map((user) => (
                <div>
                    <h3>{user.firstname} {user.lastname}: {user.age}</h3>
                    <p>{user.bio}</p>
                    <b>{user.isHappy ? 'Happy : D' : 'Not happy'}</b>
                </div>
            ))}
        </div>
    )
}

export default Users;

JavaScript

We going edit the css file once again now we could edit the Users list

src/main.css

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #333;
    color: #ffffff;
    font-weight: 300;
    font-family: "Lora", serif;
}

.TitleHeader {
    background-color: #222;
    padding: 25px 100px;
    font-weight: 600;
    font-family: "Lora", serif;
}

main {
    margin: 50px 100px;
    width: 50%;
    float: left;
}

.UserRow {
    margin-bottom: 50px;
    background-color: blueviolet;
    padding: 20px;
}

CSS

Adding className on div in Users.js

src/components/Users.js

function Users() {
    let UsersList = [
        {
            id: 1,
            firstname: 'Bob',
            lastname: 'Marley',
            bio: 'Bob Marley like\'s PHP.',
            age: 40,
            isHappy: true
        },
        {
            id: 2,
            firstname: 'John',
            lastname: 'Doe',
            bio: 'John Doe like\'s JS.',
            age: 22,
            isHappy: false
        }
    ];

    return(
        <div>
            {UsersList.map((user) => (
                <div className="UserRow">
                        <h3>{user.firstname} {user.lastname}: {user.age}</h3>
                        <p>{user.bio}</p>
                        <b>{user.isHappy ? 'Happy : D' : 'Not happy'}</b>
                </div>
            ))}
        </div>
    )
}

export default Users;

JavaScript

src/components/Header.js

function Header({title}){
    return (
        <header className="TitleHeader">
            {title}
        </header>
    )
}

export default Header;

JavaScript

Here our page