Untitled
unknown
plain_text
5 months ago
1.9 kB
3
Indexable
``` jsx // App.js import React, { useState, useEffect } from 'react'; import MatchList from './MatchList'; function App() { const [matches, setMatches] = useState([]); const [sports, setSports] = useState(['cricket', 'football', 'basketball']); useEffect(() => { fetch('/api/matches') .then(response => response.json()) .then(data => setMatches(data)); }, []); return ( <div> <h1>Live Scores</h1> <select onChange={(e) => setSports([e.target.value])}> {sports.map((sport) => ( <option value={sport}>{sport}</option> ))} </select> <MatchList matches={matches} sport={sports[0]} /> </div> ); } export default App; ``` ``` jsx // MatchList.js import React from 'react'; function MatchList({ matches, sport }) { return ( <ul> {matches .filter((to match) => match.sport === sport) .map((match) => ( <li key={(link unavailable)}> {match.team1} vs {match.team2} - {match.score} </li> ))} </ul> ); } export default MatchList; ``` *Backend (Node.js/Express)* ``` // server.js const express = require('express'); const app = express(); const port = 3000; const matches = [ { id: 1, sport: 'cricket', team1: 'Team A', team2: 'Team B', score: '100/2' }, { id: 2, sport: 'football', team1: 'Team C', team2: 'Team D', score: '2-1' }, // ... ]; app.get('/api/matches', (req, res) => { res.json(matches); }); app.listen(port, () => { console.log(`Server started on port ${port}`); }); ``` *Database (MongoDB)* ``` // database.js const mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/livescores', { useNewUrlParser: true }); const matchSchema = new mongoose.Schema({ sport: String, team1: String, team2: String, score: String, }); const Match = mongoose.model('Match', matchSchema); module.exports = Match; ``
Editor is loading...
Leave a Comment