Can't create Dynamic UI element in Reactjs

Question

I want to generate JSX for UI dynamically in real time . I declare global setState

 this.state = {
      updatedNumOfLayer: 1
     }

and create one function handleChange

   handleChange = (event) => {

      this.setState({
  updatedNumOfLayer: event.target.value
})

My UI element is generating as per the value of 'this.state.updatedNumOfLayer'. Now I want to generate UI element in real time(When user is passing the value in textfield )

   {[...Array((this.state.updatedNumOfLayer))].map((value, index) => {
    console.log("updatedNumOfLayer "+ this.state.updatedNumOfLayer)
          return(
             <TextField
               id="outlined-read-only-input"
                label=""
                value={"Layer " + (index + 1)}                     
                margin="dense" style={{ height: 38 }}
                InputProps={{
                readOnly: true,
                disableUnderline: true,
                style: { fontSize: 12, padding: 10 }
                 }}
                              variant="standard"
                              size="small"
                            />
                           )
                          })}

But UI is not rendering. does anyone know how to I accomplimsh or any guidance, reference appreciated.

Do you have any console errors in your browser? Maybe try adding key=index.toString() to your TextField — John-Hugh Hedrick, Sep 19 '22 at 20:07
It looks like you're not updating your state from your textfield. Try adding ```onChange={handleChange}``` to your TextField. — Gustavo Cesário, Sep 19 '22 at 20:15

Can't create Dynamic UI element in Reactjs

0 Answers0