Explorer
project
index.html
index.js
style.css
Dependencies
react-dom@16.13.1
react@16.13.1
Bootcamp
Study group
Collaborate with peers in your dedicated #study-group channel.
Code reviews
Submit projects for review using the /review
command in your #code-reviews channel
import React, { useState, createContext, useContext } from 'react';
import ReactDOM from 'react-dom';
// We want to change App to:
// <DateFields value={startDate} onChange={setStartDate}>
// <MonthField aria-label="Start Month" />
// <DayField aria-label="Start Day" />
// <YearField start={2018} end={2019} aria-label="Start year" />
// </DateFields>
// The tasks:
// 1) Edit App to stop rendering the individual components
// in DateFields and render children instead
// 2) Provide Context in DateFields
// 3) Use the Context in MonthField, DayField, and YearField.
function App() {
const [startDate, setStartDate] = useState(new Date('May 28, 2020'))
return (
<div>
<h1>Dates!</h1>
<DateFields value={startDate} onChange={setStartDate} start={2010} end={2020} />
</div>
)
}
function DateFields({ start, end, value, onChange }) {
return (
<div className="date-picker">
<MonthField date={value} onChange={onChange} />/
<DayField date={value} onChange={onChange} />/
<YearField date={value} onChange={onChange} start={start} end={end} />
</div>
)
}
function DayField(props) {
const { date, onChange } = props
const value = date.getDate()
const handleChange = (event) => {
const newDate = new Date(date.getTime())
newDate.setDate(parseInt(event.target.value))
onChange(newDate)
}
return (
<select value={value} onChange={handleChange}>
{Array.from({ length: 31 }).map((_, index) => (
<option key={index} value={index + 1}>
{index + 1}
</option>
))}
</select>
)
}
function MonthField(props) {
const { date, onChange } = props
const month = date.getMonth()
const handleChange = (event) => {
const newDate = new Date(date.getTime())
newDate.setMonth(parseInt(event.target.value))
onChange(newDate)
}
return (
<select value={month} onChange={handleChange}>
{Array.from({ length: 12 }).map((_, index) => (
<option key={index} value={index + 1}>
{index + 1}
</option>
))}
</select>
)
}
function YearField(props) {
const { date, onChange, start, end } = props
const years = Array.from({ length: end - start + 1 }).map(
(_, index) => index + start
)
const handleChange = (event) => {
const newDate = new Date(date.getTime())
newDate.setYear(parseInt(event.target.value), 1)
onChange(newDate)
}
return (
<select value={date.getFullYear()} onChange={handleChange}>
{years.map((year) => (
<option key={year}>{year}</option>
))}
</select>
)
}
ReactDOM.render(<App />, document.getElementById('root'));