Today #Day94 of #100DaysOfCode, I am coding and explaining by 'Building an Airport Flight status widget using React, Node.js, Database' taught by [Ania Kubów].

Work on the table body and populate it with our data from Datastax Astra,

the aim is to map the data from API to table rows,

In the table body, we pull the data from the backend,

for this import use state and use effect,

import { useState, useEffect } from 'react'

Now, get the data itself,

at first, since the promise isn't resolved the flights constant variable is set to null using use state method,

as soon as the promise gets resolved in the second then method setFlights() will send the object that we got from the backend server to the flights variable which was earlier null.

I used object destructure,

const [flights, setFlights] = useState(null)

const getFlights = () => {
        fetch('http://localhost:8000/flights')
            .then(response => response.json())
                  .then(({data:flights}) => setFlights(Object.values(flights)))
            .catch(err => console.log(err))
    }
   useEffect(() => getFlights(), [])
    console.log(flights)

To remove the cors error which Ania Kubów named as [link]

The Pesky Error

go the server.js and call the cors() to get rid of this pesky message,

app.use(cors())

Now, populate the table rows,

map the object values to table rows,

 return (
        <tbody>
        {flights?.map((flight, _index) => (
            <TableRow key={_index} flight={flight} />
        ))}
        </tbody>
    )

also import the tablerow,

import TableRow from './TableRow'

After that, work on table row.jsx,

import TableCell from './TableCell'
const TableRow = ({ flight }) => {
    const words = Object.values(flight)
    console.log(words)
    return (
        <tr>
            <td>✈</td>
            {words?.map((word, _index) => (
                <TableCell key={_index} word={word} />
                ))}
        </tr>
    )
}
export default TableRow

Then, work on table cell,

destructure the word and put each letter in a div to get the flipping effect,

import TableLetter from './TableLetter'
const TableCell = ({ word }) => {
    return (
        <td>
            {Array.from(word).map((letter, index) => (
                <TableLetter key={index} letter={letter} index={index}/>
            ))}
        </td>
    )
}

export default TableCell

CSS

style the div

.departures table div {
    border: solid 4px rgb(26, 26, 26);
    background-color: rgb(0,0,0);
    min-width: 20px;
    height: 40px;
    float: left;
}

Define a class for the flip,

and define the animation,

.flip {
    animation: 0.5s linear flipping;
}
@keyframes flipping {
    0% {
        transform: rotateX(0deg);
    }
    50% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

create tableletter.jsx file,

import { useState } from "react"

const TableLetter = ({ letter, index}) => {
    const [flip, setFlip] = useState(false)
    setTimeout(() => {
        setFlip(true)
    }, 100 * index)
    return (
        <div className={flip ? 'flip' : null}>
            {flip ? letter : null}
        </div>
    )
}
export default TableLetter

Conclusion

Learned how to remove pesky errors named by ania kubow aka CORS error,

I have successfully completed 'Building an Airport Flight status widget using React, Node.js, Database'

Learned How to create a server in Express Js and How to setup a react app and How to create a database & push flight data and pull data into our server and how to process this data using react framework.

Thanks, Ania Kubów.

Code

1. code

   

   preview - flipping animation,

   

   Final preview,

   

Source: Code with Ania Kubów [link]

Best moment: Code with Ania Kubów [link]

Author: Dheeraj.y

Connect with me:

• My Twitter

• My LinkedIn

• My GitHub

• My Hashnode