Components + Data

Her er et eksempel på hvordan man kan bruge properties på react komponenter til at vise udvalgte informationer, f.eks. fra en database eller et API.

Eksemplet bygger videre på den app der blev oprettet i React intro.

Input data

For at have noget data at vise, oprettes følgende datastruktur oprettet i filen src/lib/fake_highscores.js.

// Fake data - could come from a database or similar
const data = {
  userIdOne: {
    username: "jens",
    firstName: "Jens",
    lastName: "Hansen",
    scores: [
      { date: "2020-03-16T10:30:45", score: 7 },
      { date: "2020-03-16T12:30:45", score: 15 },
      { date: "2020-03-16T12:32:45", score: 10 },
    ]
  },
  userIdTwo: {
    username: "jj",
    firstName: "Jørgen",
    lastName: "Jyde",
    scores: [
      { date: "2020-03-16T11:30:42", score: 120 },
      { date: "2020-03-16T12:35:31", score: 12 },
      { date: "2020-03-16T12:37:20", score: 23 },
      { date: "2020-03-17T09:07:34", score: 17 },
      { date: "2020-03-17T09:31:10", score: 25 },
    ]
  },
  userIdThree: {
    username: "john",
    firstName: "John",
    lastName: "Doe",
    scores: [
      { date: "2020-03-16T10:57:45", score: 11 },
      { date: "2020-03-16T11:05:45", score: 8 },
      { date: "2020-03-16T11:21:12", score: 13 },
    ]
  }
};

export default data;

I en rigtig app kan vi forestille os at data er gemt i en database, i og ikke blot gemt i en statisk fil.

Præsentation i browser

For at kunne vise highscore data i browseren laves en par nye komponenter i filen src/components/Highscore.js, så den har dette indhold.

import React from "react";

import data from '../lib/fake_highscores';

function Highscore() {
  return (
    <div>
      <h1>Highscores</h1>
      {
        Object.values(data).map(item => (
          <User key={item.username} user={item} />
        ))
      }
    </div>
  );
}

const User = props => {
  return (
    <div>
      <h2>
        {props.user.firstName} {props.user.lastName}
      </h2>
      <p>Username: {props.user.username}</p>
      <table>
        <thead>
          <tr>
            <th>Time</th>
            <th>Score</th>
          </tr>
        </thead>

        <tbody>
          {props.user.scores.map((item, i) => (
            <tr key={i}>
              <td>{item.date}</td>
              <td>{item.score}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Highscore;

Bemærk hvordan der i Highscore komponenten itereres over data objektets værdier, og oprettes en react komponenter af typen User for hver entry.

Derefter indsættes Highscore komponenten i vores App komponent, så src/App.js nu ser således ud:

import React from 'react';
import './App.css';

import Clock from './components/Clock'
import Highscore from './components/Highscore';

function App() {
  return (
    <div className="App">
      <Clock />
      <Highscore />
    </div>
  );
}

export default App;

Styling af tabeller

For at få html tabellerner med highscores til at se en smule pænere ud kan vi tilføje lidt css, så filen src/App.css nu ser således ud.

.App {
  padding: 1em;
}

table {
  border-collapse: collapse;
  width: 30em;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {
  background-color: #f5f5f5;
}

Materiale