redux filter pane 1

redux filter pane

// Pane.js

import React from 'react';

function Pane({
  selectedYear,
  selectedGenre,
  selectedRating,
  years = [],
  genres = [],
  ratings = [],
  sorting,
  onYearChange,
  onGenreChange,
  onRatingChange,
  onSortingChange,
}) {
  return (
    
Filters:
Year:
Genre:
Rating:
Select sorting:
); } export default Pane;

Here is what the above code is Doing:
1. We’re importing React from the react package.
2. We’re defining a function called Pane.
3. We’re passing in the following props to the Pane function:
– selectedYear
– selectedGenre
– selectedRating
– years
– genres
– ratings
– sorting
– onYearChange
– onGenreChange
– onRatingChange
– onSortingChange
4. We’re returning a div that contains the following:
– A div that contains the text “Filters:” and the following:
– A div that contains the text “Year:” and a select element that has the following:
– A default value of selectedYear
– An onChange event handler that calls the onYearChange function and passes in the value of the select element
– An option element that has the following:
– A value of “all”
– The text “All”
– A map of the years array that returns the following for each item in the array:
– An option element that has the following:
– A key of i
– A value of y
– The text y
– A div that contains the text “Genre:” and a select element that has the following:
– A default value of selectedGenre
– An onChange event handler that calls the onGenreChange function and passes in the value of the select element
– An option element that has the following:
– A value of “all”
– The text “All”
– A map of the genres array that returns the following for each item in the array:
– An option element that has the following:
– A key of i
– A value of g
– The text g
– A div that contains the text “Rating:” and a select element that has the following:
– A default value of selectedRating
– An onChange event handler that calls the onRatingChange function and passes in the value of the select element
– An option element that has the following:
– A value of “all”
– The text “All”
– A map of the ratings array that returns the following for each item in the array:
– An option element that has the following:
– A key of i
– A value of r
– The text r
– A div that contains the text “Select sorting:” and a select element that has the following:
– A default value of sorting
– An onChange event handler that calls the onSortingChange function and passes in the value of the select element
– An option element that has the following:
– A value of “alphabetically”
– The text “Alphabetically”
– An option element that has the following:
– A value of “year”
– The text “Year”
– An option element that has the following:
– A value of “rating”
– The text “Rating”
5. We’re exporting the Pane function.

Let’s add the Pane component to the App component.

Open the App.js file and add the following code to the App function:

Similar Posts