https://github.com/morrismagic/react4

https://github.com/morrismagic/react4

Last synced: 1 day ago
JSON representation

• Host: GitHub
• URL: https://github.com/morrismagic/react4
• Owner: MorrisMagic
• Created: 2024-11-02T20:02:09.000Z (12 days ago)
• Default Branch: main
• Last Pushed: 2024-11-02T20:02:42.000Z (12 days ago)
• Last Synced: 2024-11-02T21:16:54.522Z (12 days ago)
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
import React from 'react';

function MovieCard({ title, description, posterURL, rating }) {

  return (

    


      

      
{title}

      
{description}

      
Rating: {rating}

    

  );

}


export default MovieCard;

import React from 'react';

import MovieCard from './MovieCard';

function MovieList({ movies }) {

  return (

    


      {movies.map((movie, index) => (

        

      ))}

    

  );

}


export default MovieList;

import React from 'react';

function Filter({ setFilterTitle, setFilterRating }) {

  return (

    


       setFilterTitle(e.target.value)}

        style={{ marginRight: "8px", padding: "8px" }}

      />

       setFilterRating(e.target.value)}

        style={{ padding: "8px" }}

      />

    

  );

}


export default Filter;

import React, { useState } from 'react';

import MovieList from './MovieList';

import Filter from './Filter';

function App() {

  const [movies, setMovies] = useState([

    {

      title: "Inception",

      description: "A skilled thief is offered a chance to erase his criminal history.",

      posterURL: "https://example.com/inception.jpg",

      rating: 5,

    },

    {

      title: "The Matrix",

      description: "A computer hacker learns about the true nature of reality.",

      posterURL: "https://example.com/matrix.jpg",

      rating: 4.5,

    },

  ]);

  const [filterTitle, setFilterTitle] = useState('');

  const [filterRating, setFilterRating] = useState('');

  const filteredMovies = movies.filter((movie) => 

    movie.title.toLowerCase().includes(filterTitle.toLowerCase()) &&

    movie.rating >= filterRating

  );

  const addMovie = (movie) => {

    setMovies([...movies, movie]);

  };

  return (

    


      
My Movie App

      

       addMovie({ title: "New Movie", description: "New Description", posterURL: "https://example.com/new.jpg", rating: 3 })}>

        Add New Movie

      

      

    

  );

}


export default App;