i want the players to be shown based on the year that the user selects. for example if i choose 2011 in the 1st select at the 2nd select show only the players that are born in 2011. i created a if statement for every year and checked if he is born between 1st January of that year and 31 December, but i dont think thats too efficient to do (100 if statements). im working with React js
The code is below
import React, { useState, useEffect } from 'react';
import './style.css';
export default function App() {
const vitet = [
2030, 2029, 2028, 2027, 2026, 2025, 2024, 2023, 2022, 2021, 2020, 2019,
2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007,
2006, 2005, 2004, 2003, 2002, 2001, 2000, 1999, 1998, 1997, 1996, 1995,
1994, 1993, 1992, 1991, 1990, 1989, 1988, 1987, 1986, 1985, 1984, 1983,
1982, 1981, 1980, 1979, 1978, 1977, 1976, 1975, 1974, 1973, 1972, 1971,
1970, 1969, 1968, 1967, 1966, 1965, 1964, 1963, 1962, 1961, 1960, 1959,
1958, 1957, 1956, 1955, 1954, 1953, 1952, 1951, 1950, 1949, 1948, 1947,
1946, 1945, 1944, 1943, 1942, 1941, 1940, 1939, 1938, 1937, 1936, 1935,
1934, 1933, 1932, 1931, 1930, 1929, 1928, 1927, 1926, 1925, 1924, 1923,
1922, 1921, 1920, 1919, 1918, 1917, 1916, 1915, 1914, 1913, 1912, 1911,
];
const [year, setyear] = useState('');
const [option, setOption] = useState([]);
const [players, setPlayers] = useState([
{ playerName: 'ANn', playerId: '1', birthday: '2010-01-02' },
{ playerName: 'Eli', playerId: '2', birthday: '2011-01-02' },
{ playerName: 'Benn', playerId: '3', birthday: '2012-01-02' },
{ playerName: 'Klo', playerId: '4', birthday: '2013-01-02' },
{ playerName: 'Jhon', playerId: '5', birthday: '2014-01-02' },
{ playerName: 'Billy', playerId: '6', birthday: '2015-01-02' },
{ playerName: 'Dani', playerId: '7', birthday: '2015-01-02' },
{ playerName: 'Molly', playerId: '8', birthday: '2016-01-02' },
{ playerName: 'emily', playerId: '9', birthday: '2000-01-02' },
]);
let secondOptions = players;
if (year === '2010') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2010-01-01' && players.birthday <= '2010-12-31'
);
} else if (year === '2011') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2011-01-01' && players.birthday <= '2011-12-31'
);
} else if (year === '2012') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2012-01-01' && players.birthday <= '2012-12-31'
);
} else if (year === '2013') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2013-01-01' && players.birthday <= '2013-12-31'
);
} else if (year === '2014') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2014-01-01' && players.birthday <= '2014-12-31'
);
} else if (year === '2015') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2015-01-01' && players.birthday <= '2015-12-31'
);
} else if (year === '2016') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2016-01-01' && players.birthday <= '2016-12-31'
);
} else if (year === '2017') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2017-01-01' && players.birthday <= '2017-12-31'
);
} else if (year === '2018') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2018-01-01' && players.birthday <= '2018-12-31'
);
} else if (year === '2019') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2019-01-01' && players.birthday <= '2019-12-31'
);
} else if (year === '2000') {
secondOptions = players.filter(
(players) =>
players.birthday >= '2000-01-01' && players.birthday <= '2000-12-31'
);
} else {
secondOptions = [];
}
useEffect(() => {
// Update the document title using the browser API
console.log('playerat per ke optioni', secondOptions);
});
return (
<div>
<h1>Hello StackBlitz!</h1>
<p>Start editing to see some magic happen :)</p>
<select name="" id="" onChange={(e) => setyear(e.target.value)}>
{/* <option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option> */}
{vitet.map((item) => (
<option value={item}>{item}</option>
))}
</select>
<select>
{secondOptions.map((item) => (
<option key={item.playerId}>{item.playerName}</option>
))}
</select>
<p> {year}</p>
</div>
);
}
to have a look at a code editor you can see here.
https://stackblitz.com/edit/react-jruwh9
CodePudding user response：
Yes, you should get rid of all the if conditions.
You can do something like this:
secondOptions = players.filter(
(player) =>{
let split = player.birthday.split('-')
return split[0] === year
}
);
CodePudding user response：
Well, if you really want to treat dates as strings (check the notes at the end of the answer), what you can do there is the following
import React, { useState } from 'react';
import './style.css';
const years = [
2030, 2029, 2028, 2027, 2026, 2025, 2024, 2023, 2022, 2021, 2020, 2019,
2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007,
2006, 2005, 2004, 2003, 2002, 2001, 2000, 1999, 1998, 1997, 1996, 1995,
1994, 1993, 1992, 1991, 1990, 1989, 1988, 1987, 1986, 1985, 1984, 1983,
1982, 1981, 1980, 1979, 1978, 1977, 1976, 1975, 1974, 1973, 1972, 1971,
1970, 1969, 1968, 1967, 1966, 1965, 1964, 1963, 1962, 1961, 1960, 1959,
1958, 1957, 1956, 1955, 1954, 1953, 1952, 1951, 1950, 1949, 1948, 1947,
1946, 1945, 1944, 1943, 1942, 1941, 1940, 1939, 1938, 1937, 1936, 1935,
1934, 1933, 1932, 1931, 1930, 1929, 1928, 1927, 1926, 1925, 1924, 1923,
1922, 1921, 1920, 1919, 1918, 1917, 1916, 1915, 1914, 1913, 1912, 1911,
];
const players = [
{ playerName: 'ANn', playerId: '1', birthday: '2010-01-02' },
{ playerName: 'Eli', playerId: '2', birthday: '2011-01-02' },
{ playerName: 'Benn', playerId: '3', birthday: '2012-01-02' },
{ playerName: 'Klo', playerId: '4', birthday: '2013-01-02' },
{ playerName: 'Jhon', playerId: '5', birthday: '2014-01-02' },
{ playerName: 'Billy', playerId: '6', birthday: '2015-01-02' },
{ playerName: 'Dani', playerId: '7', birthday: '2015-01-02' },
{ playerName: 'Molly', playerId: '8', birthday: '2016-01-02' },
{ playerName: 'emily', playerId: '9', birthday: '2000-01-02' },
];
export default function App() {
const [year, setYear] = useState('');
const secondOptions = players.filter(player => player.birthday >= `${year}-01-01` && player.birthday <= `${year}-12-31`);
return (
<div>
<h1>Hello StackBlitz!</h1>
<p>Start editing to see some magic happen :)</p>
<select onChange={(e) => setYear(e.target.value)}>
{years.map((item) => (
<option key={`year_option_${item}`} value={item}>{item}</option>
))}
</select>
<select>
{secondOptions.map((item) => (
<option key={`second_option_${item.playerId}`} value={item.playerId}>{item.playerName}</option>
))}
</select>
<p>{year}</p>
</div>
);
}
I moved some variables out of the component since, as they are now, they don't need to be in the component. Also, I added some missing keys and removed unused variables, for demonstration propose.
Important note about dates
Usually is better to treat dates as Date instead of strings.
If you decide to treat your dates ad Date instances, then you can use the functions you have available in JavaScript and do something similar of what I shown in the code I posted, in the filter section.
CodePudding user response：
I would start with optimizing your year selection. Use a start year, and fill an array up until now. Nobody is born the future... yet ;)
Next filter the years with only those that have players, next if you set the year, simply filter the players on the current year.
import React, { useState } from 'react';
import './style.css';
export default function App() {
const START_YEAR = 1911;
const END_YEAR = new Date().getFullYear() 1;
const [year, setyear] = useState('');
const [players, setPlayers] = useState([
{ playerName: 'ANn', playerId: '1', birthday: '2010-01-02' },
{ playerName: 'Eli', playerId: '2', birthday: '2011-01-02' },
{ playerName: 'Benn', playerId: '3', birthday: '2012-01-02' },
{ playerName: 'Klo', playerId: '4', birthday: '2013-01-02' },
{ playerName: 'Jhon', playerId: '5', birthday: '2014-01-02' },
{ playerName: 'Billy', playerId: '6', birthday: '2015-01-02' },
{ playerName: 'Dani', playerId: '7', birthday: '2015-01-02' },
{ playerName: 'Molly', playerId: '8', birthday: '2016-01-02' },
{ playerName: 'emily', playerId: '9', birthday: '2000-01-02' },
]);
const vitet = new Array(END_YEAR - START_YEAR)
.fill(START_YEAR)
.map((current, i) => current i)
.filter(
(year) =>
players.find(
(player) => player.birthday.substr(0, 4) === year.toString()
) !== undefined
);
return (
<div>
<h1>Hello StackBlitz!</h1>
<p>Start editing to see some magic happen :)</p>
<select name="" id="" onChange={(e) => setyear(e.target.value)}>
{vitet.map((item) => (
<option value={item}>{item}</option>
))}
</select>
<select>
{players
.filter((player) => player.birthday.substr(0, 4) === year.toString())
.map((item) => (
<option key={item.playerId}>{item.playerName}</option>
))}
</select>
<p> {year}</p>
</div>
);
}