How can bind the "areaName" on <TexBox> vlaue=" " and onChange=" ":?

Question

Actually, I have called an API and map the array and bind the data on <TableCell>

 {this.state.allArea.map((allArea, i) => (
                    <TableRow >
                        <TableCell >{allArea.areaName}</TableCell>
                <TableCell  >{allArea.cityName}</TableCell>
                        <TableCell > <IconButton aria-label="edit" onClick= 
                  {this.addCoupon.bind(this)}  >
                                   <EditIcon />
                     </IconButton><IconButton aria-label="delete">
                        <DeleteIcon />
                       </IconButton></TableCell> </TableRow>
                 ))}

But Now, I want to edit/update the areaName so I create a <TexBox>

       <Grid container spacing={8}>
                <Grid item md={12} sm={12} xs={12} >
                    <TextBox error='' value='' name="name" label="Area name" required={true} onChange={this.handleAreaChange.bind(this)} ></TextBox>
                </Grid>

            </Grid>

but I am unable to bind areaName at value="" and onChange=''

Answer 1

Define like this

  <TextBox error='' value={areaName} 
   name="name" label="Area name" 
   required={true} onChange={this.handleAreaChange} >
  </TextBox>

handleAreaChange function

  handleAreaChange=e=>{
   this.setState({areaName:e.target.value})
  }