blog.unresolved.xyzblog.unresolved.xyz

Material-UIで配列を複数のTextFieldに分割して処理する方法

Thu Jul 01 2021
  • React
  • TIL
  • Material UI
<Paper className={props.styles.choices} variant="outlined">
  {[0, 1, 2].map((i) => (
    <FormItem key={i}>
      <fieldset name="japaneseChoices" className={props.styles.fieldSet}>
        <Controller
          as={TextField}
          id={`japaneseChoices${i}`}
          name={`japaneseChoices.${i}`}
          label={`${I18n.t('attributes.word.japaneseChoices')} ${i + 1}`}
          fullWidth
          control={props.control}
          defaultValue={props.word.japaneseChoices && props.word.japaneseChoices[i]}
          onChange={console.log}
        />
      </fieldset>
    </FormItem>
  ))}
</Paper>