-1

So I've been struggeling with the following issue: I have a function that returns me a number of years (4 years). These years need to each be mapped with two options in a select ( term 1 and term 2 for example).

 <select>
            {getSemesterSelection().map((el, key) => {
              return (
                <>
                  <option value={`${el}1`} key={`${el}1`}>{`${el}1`}</option>
                  <option value={`${el}2`} key={`${el}2`}>{`${el}2`}</option>
                </>
              );
            })}
          </select>

So react is warning me, that I need to set a key, but I cannot wrap them with a div in order to set a key for each map item. Does anyone have a quick effecient solution for this case?

Michael
  • 947
  • 7
  • 17

1 Answers1

1

Just use <React.Fragment key={...}> instead of <>. it's the same. Ref: https://reactjs.org/docs/fragments.html#keyed-fragments

Igor Loskutov
  • 2,157
  • 2
  • 20
  • 33