How to return the years array using React-select

Question

I’m using the react-select to select the React project. I need to return the last five years. And then popular the options={} select. Only that he is only taking the last year, in the case 2020, but is not bringing the whole list, that would be: 2020,2019,2018,2017,2016

  const getOptions = () => {
    const years = [];

    for (let i = 0; i < 5; i++) {
      years.push(new Date().getFullYear() - i);
    }

    for (let valor of years) {
      console.log(valor);
      const anos = [
        {
          value: valor,
          label: valor
        }
      ];

      console.log("years", years);
      console.log("anos", anos);
      return anos;
    }
  };

Select:

 <Select
        placeholder="Ano"
        value={props.values.ano}
        onChange={selectedOption => {
          handleChange("ano")(selectedOption);
        }}
        isSearchable={true}
        options={getOptions()}
        styles={customStyles}
        name="ano"
        isLoading={false}
        loadingMessage={() => "Carregando os ano"}
        noOptionsMessage={() => "Não tem ano"}
      />

He carries only:

Answer 1

I think you’re confused

as its code assigns a value, rather than incrementing the array, it is natural that this happens

notice:

for (let valor of years) {
  const anos = [
    {
     value: valor,
     label: valor
    }
  ];    
  return anos;
 }

the correct would be you increase with push resulting in such a code:

anos.push({
  value: valor,
  label: valor
 })

define let anos before the for, and implement the push in years, within the range of years.

as well as the const years was set before the was.

const years = [];

for (let i = 0; i < 5; i++) {
  years.push(new Date().getFullYear() - i);
}

return of the getOptions function should stay out of the for thus finishing the assignments and then returning the array.

 let anos = [];
 for (let valor of years) {
  anos.push({
     value: valor,
     label: valor
    })  
 }
 return anos;

A tip use let instead of const. To const refers to constant or is not changes, but Let defines a variable within a escopo that can be changed during the execution of the same.

Answer 2

You can also opt for a slightly more declarative solution without the need to use an imperative solution. There is nothing wrong with the for, but he’s a little shy of the "unchanging" standards that React preaches.

So you can also do something like:

function getOptions(ammount = 5) {
  return Array.from({ length: ammount })
    .map((_, index) => new Date().getFullYear() - index);
}

console.log(getOptions());

Basically, we’re creating a list of 5 elements and mapping each element of that array for a specific year. For this, we subtract the current year minus the element index, so we will have:

• First iteration, zero index: 2020 - 0 -> 2020;
• Second iteration, index one: 2020 - 1 -> 2019;
• Third iteration, index two: 2020 - 2 -> 2018;
• Fourth iteration, index three: 2020 - 1 -> 2017;
• Fifth iteration, index four: 2020 - 4 -> 2016.