quantum/qcal
1
0
Fork 0
mirror of https://github.com/quantum5/qcal.git synced 2025-04-24 17:51:57 -04:00
Code Issues Packages Projects Releases Wiki Activity

Deal with the warning with lack of key

Browse source 
We actually do want the array index as the key...
This commit is contained in:
Quantum 2022-02-19 21:31:43 -05:00
parent cf930d3a8b
commit b2706150d6
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/Calendar.tsx
View file

@ -48,16 +48,16 @@ function NormalDay({year, month, day, todayJDN}: DateProps & { todayJDN: number
} }
function NormalMonth({year, month, todayJDN}: MonthProps & { todayJDN: number }): JSX.Element { function NormalMonth({year, month, todayJDN}: MonthProps & { todayJDN: number }): JSX.Element {
const decadeHeads = decadeNames.map(name => <DecadeName name={name}/>); const decadeHeads = decadeNames.map((name, i) => <DecadeName key={i} name={name}/>);
return <div className="Month"> return <div className="Month">
<div className="Month-decadeHead">{decadeHeads}</div> <div className="Month-decadeHead">{decadeHeads}</div>
<div className="Month-decades">{ <div className="Month-decades">{
Array.from(Array(3).keys()).map(i => <div className="Month-decade">{ Array.from(Array(3).keys()).map(i => <div key={i} className="Month-decade">{
Array.from(Array(10).keys()).map(j => <> Array.from(Array(10).keys()).map(j => <React.Fragment key={j}>
<NormalDay year={year} month={month} day={i * 10 + j + 1 as Day} todayJDN={todayJDN}/> <NormalDay year={year} month={month} day={i * 10 + j + 1 as Day} todayJDN={todayJDN}/>
{j % 2 === 1 && <div className="Month-decadeSplitter-small"/>} {j % 2 === 1 && <div className="Month-decadeSplitter-small"/>}
{j === 4 && <div className="Month-decadeSplitter-medium"/>} {j === 4 && <div className="Month-decadeSplitter-medium"/>}
</>) </React.Fragment>)
}</div>) }</div>)
}</div> }</div>
</div>; </div>;
@ -74,11 +74,11 @@ function ComplementaryDay({year, month, day, todayJDN}: DateProps & { todayJDN:
function ComplementaryDays({year, todayJDN}: { year: number, todayJDN: number }): JSX.Element { function ComplementaryDays({year, todayJDN}: { year: number, todayJDN: number }): JSX.Element {
const leap = frIsLeap(year); const leap = frIsLeap(year);
return <div className="ComplementaryDays">{ return <div className="ComplementaryDays">{
Array.from(Array(6).keys()).map(i => <> Array.from(Array(6).keys()).map(i => <React.Fragment key={i}>
{(i < 5 || leap) && <ComplementaryDay year={year} month={13} day={i + 1 as Day} todayJDN={todayJDN}/>} {(i < 5 || leap) && <ComplementaryDay year={year} month={13} day={i + 1 as Day} todayJDN={todayJDN}/>}
{i === 5 && !leap && <div className="ComplementaryDay-fake"/>} {i === 5 && !leap && <div className="ComplementaryDay-fake"/>}
{i % 2 === 1 && <div className="ComplementaryDays-splitter"/>} {i % 2 === 1 && <div className="ComplementaryDays-splitter"/>}
</>) </React.Fragment>)
}</div>; }</div>;
} }
@ -211,7 +211,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
value={this.props.month}>{ value={this.props.month}>{
Array.from(Array(13).keys()).map(i => { Array.from(Array(13).keys()).map(i => {
const month = i + 1 as Month; const month = i + 1 as Month;
return <option value={month}>{monthName(month)}</option>; return <option key={i} value={month}>{monthName(month)}</option>;
}) })
}</select> }</select>
<input type="number" className="Calendar-year-input form-control" value={this.state.yearStr} <input type="number" className="Calendar-year-input form-control" value={this.state.yearStr}