문제 설명
하루의 정수 값이 두 번째 이벤트 항목 배열의 타임스탬프와 일치해야 하는 날짜 값 배열에서 항목을 필터링하는 방법은 무엇입니까? (How to filter items from an array of day values where a day's integer value has to match any timestamp from a second array of event items?)
JSX에서 한 달에 계산한 날짜 수를 매핑하고 있습니다.
{range(daysInMonth).map((i) => (
<div
className="day‑cell day‑cell‑‑in‑month"
key={i}
>
{i + 1}
</div>
))}
API에서 오는 이벤트 배열이 있습니다.
const events = [
{
date: timestamp,
description: "Meeting with friends"
}
//More events//
]
How 이벤트 배열을 통해 매핑하고 이벤트 타임스탬프를 매핑되는 daysInMonth 날짜의 현재 타임스탬프와 일치시킨 다음 이벤트 설명을 표시할 수 있습니까?
참조 솔루션
방법 1:
In case the above comment's assumption ...
"the daysInMonth is just a number, for example for Feb it would be 28." ... thus, one can assume the timestamp/date value of an events item is an integer as well?
</blockquote>... applies, one could implement the preceding
filter
task in collaboration withsome
.const events = [{ date: timestamp, description: "Meeting with friends" }/*, { More events }*/]; { range( daysInMonth ).filter(dayValue => events.some(({ date }) => date === dayValue) ).map(dayValue => ( <div className="day‑cell day‑cell‑‑in‑month" key={dayValue} > {dayValue + 1} </div> )) }
Edit
"... thus, one can assume the timestamp/date value of an
events
item is an integer as well?" – Peter Seliger"... it's a timestamp from a MySQL database." – adherb
"... then within the already provided filter code of my answer one has to get the
day
from eachevents
item'sdate
value in order to make it comparable to the integer value of eachdaysInMonth
item." – Peter Seligerconst events = [{ date: timestamp, description: "Meeting with friends" }/*, { More events }*/]; { range( daysInMonth ).filter(dayValue => events.some(({ date }) => new Date(date).getDay() === dayValue ) ).map(dayValue => ( <div className="day‑cell day‑cell‑‑in‑month" key={dayValue} > {dayValue + 1} </div> )) }
(by adherb、Peter Seliger)
참조 문서