Создать React Dynami c Forms

Question

Я пытаюсь получить динамическую c форму с использованием реакционных хуков и .map ();

До сих пор я добился создания формы stati c, как в этом примере: https://codesandbox.io/s/material-demo-ndh9q

это моя форма c форма:

<form className={classes.root} noValidate autoComplete="off">
      <Grid container spacing={4}>
        <Grid item xs={12} sm={6} md={4}>
          <TextField id="profile" label="Name" fullWidth={true} />
        </Grid>
        <Grid item xs={12} sm={6} md={4}>
          <TextField id="profile" label="Email" fullWidth={true} />
        </Grid>
        <Grid item xs={12} sm={6} md={4}>
          <TextField id="profile" label="Address" fullWidth={true} />
        </Grid>
        {/* textarea */}
        <Grid item xs={12} sm={12} md={12}>
          <TextField
            label="Info"
            multiline
            rows={1}
            rowsMax={4}
            fullWidth={true}
          />
        </Grid>
      </Grid>
    </form>

и здесь я пытаюсь сделать форму динамической c:

const initialState = { name: "", email: "", address: "", info: "" };

export default function BasicTextFields() {

const [inputs, setInputs] = useState({ ...initialState });

return(
<form className={classes.root} noValidate autoComplete="off">
      <Grid container spacing={4}>
      {inputs.map((item, index) => (
        <Grid item xs={12} sm={6} md={4}>
          <TextField id={index`${item}`} label={item} fullWidth={true} />
        </Grid>
      )}
  </Grid>
    </form>
)}

но возвращается ошибка, не знаю почему, может кто-нибудь помочь мне с подробной информацией, пожалуйста. помните, что последнее поле формы - это текстовое поле , поэтому он получает определенный атрибут.

ThankYou!

Answer 1

Я обнаружил, что в вашем коде есть проблема.

1. Поскольку ваш inputs является объектом, вы не можете напрямую использовать карту на нем. Я использовал Object.keys(), чтобы использовать map.
2. Также была некоторая проблема в ваших template литералах.

Вот ваш form элемент с Dynami c content.

<form className={classes.root} noValidate autoComplete="off">
  <Grid container spacing={4}>
    {
      Object.keys(inputs).map((key, index) => {
        if(key === 'info') {
          return (
            <Grid item xs={12} sm={12} md={12}>
            <TextField
              label={key}
              multiline
              rows={1}
              rowsMax={4}
              fullWidth={true}
            />
            </Grid>
          )
        } else {
          return (
            <Grid item xs={12} sm={6} md={4}>
          <TextField id={`index${key}`} label={key} fullWidth={true} />
        </Grid>
          )
        }
    })
  }
  </Grid>
</form>

Вот коды и box_link .