如何在 Material UI 中设置日期文本字段的值

Question

I've got an array of objects, where each object contains an id and a date value. For example, my array, call it stepDates , could look something like this:

[
  {
    id: 1,
    date: "2021-07-23"
  },
  {
    id: 2,
    date: null
  },
  {
    id: 3,
    date: null
  }
]

I also have another array of objects, where there is more information on the objects that you see above. This array looks something like:

const steps = [
  {
    id: 1,
    name: start
  },
  {
    id: 2,
    name: middle
  },
  {
    id: 3,
    name: end
  }
]

I'm trying to iterate over each of the objects in the above array to display the date using TextField with Material UI (without the user having to select the date themselves). However, I am getting an error when setting the value prop for the TextField component. For now, I have this:

{steps.map((step, index) => {
  return (
    <TextField
      id={step.id}
      label={step.name}
      type={"date"}
      onChange={event => handleStepDateChange(event.target.value, step.name)}
      value={
        stepDates.map(stepDate => {
          if (stepDate.id === step.id) return stepDate.date
        })
      }
    />
  )
})}

Give the above, I am trying to either display the date from the stepDates for each object if it exists, otherwise, if it's null, I just want to display the date field unselected, such as "dd/mm/yyyy".

However, in doing the above, I am getting two different errors. The first error where the date field exists gives me the following:

The specified value "2021-07-23,,,,,,,,,,,,," does not conform to the required format, "yyyy-MM-dd"

And the second error where the date is null, gives me this error (twice for each date that is null as above):

The specified value ",,,,,,,,,,,,," does not conform to the required format, "yyyy-MM-dd"

Answer 1

you're going to want to use find instead of map . so you value attribute will look like so:

value={stepDates.find(stepDate => stepDate.id === step.id).date}