on reload .map is not a function reactjs

Question

So im using material ui components inside of a .map of an array, if i try to change one of the values that was displayed by the .map it crashes my app and says .map is not a function why is this?? I will show my code below.

<div className="box-container">
      {this.props.appState.ApplicationPK === '' ? '' :
        this.state.AddressesPOne.map(function (address, index) {
          return (
            value === index && <TabContainer key={index}>
                <h1>Address: {address.AddressPK}</h1>
                <FormControl className={classes.formControl}>
                  <TextField
                    id="Street"
                    label="Street"
                    type="Street"
                    value={self.state.AddressesPOne[index].Street}
                    className={classes.input}
                    onBlur={self.props.handleChangeAddress(index, 0, 'Street')}
                    onChange={self.handleChangeAddress(index, 0, 'Street')}
                    name="Street"
                  />
                </FormControl>
                <FormControl className={classes.formControl} >
                  <TextField
                    id="District"
                    label="District"
                    type="District"
                    value={self.state.AddressesPOne[index].District}
                    className={classes.input}
                    onBlur={self.props.handleChangeAddress(index, 0, 'District')}
                    onChange={self.handleChangeAddress(index, 0, 'District')}
                    name="District"
                  />
                </FormControl>
                <FormControl className={classes.formControl} >
                  <TextField
                    id="Town"
                    label="Town"
                    type="Town"
                    value={self.state.AddressesPOne[index].Town}
                    className={classes.input}
                    onBlur={self.props.handleChangeAddress(index, 0, 'Town')}
                    onChange={self.handleChangeAddress(index, 0, 'Town')}
                    name="Town"
                  />
                </FormControl>
                <FormControl className={classes.formControl} >
                  <TextField
                    id="County"
                    label="County"
                    type="County"
                    value={self.state.AddressesPOne[index].County}
                    className={classes.input}
                    onBlur={self.props.handleChangeAddress(index, 0, 'County')}
                    onChange={self.handleChangeAddress(index, 0, 'County')}
                    name="County"
                  />
                </FormControl>
                <FormControl className={classes.formControl} >
                  <TextField
                    id="Postcode"
                    label="Postcode"
                    type="Postcode"
                    value={self.state.AddressesPOne[index].Postcode}
                    className={classes.input}
                    onBlur={self.props.handleChangeAddress(index, 0, 'Postcode')}
                    onChange={self.handleChangeAddress(index, 0, 'Postcode')}
                    name="Postcode"
                  />
                </FormControl>
                <FormControl className={classes.formControl}>
                  <InputLabel htmlFor="ResidentialStatusFK-Dropdown">Title</InputLabel>
                  <Select
                    native
                    value={self.state.AddressesPOne[index].ResidentialStatusFK}
                    onChange={self.handleChangeAddress(index, 0, 'ResidentialStatusFK')}
                    onBlur={self.props.handleChangeAddress(index, 0, 'ResidentialStatusFK')}
                    input={<Input id="ResidentialStatusFK-Dropdown" />}
                  >
                    <option value="" />
                    <option value="1">Home Owner</option>
                    <option value="2">Renting</option>
                    <option value="3">Living With Parents</option>
                  </Select>
                </FormControl>
                <FormControl className={classes.formControl}>
                  <TextField
                    id="date"
                    label="Date Moved In"
                    type="date"
                    defaultValue={self.state.AddressesPOne[index].DateMovedIn.split('T')[0]}
                    onChange={self.handleChangeAddress(index, 0, 'DateMovedIn')}
                    onBlur={self.props.handleChangeAddress(index, 0, 'DateMovedIn')}
                    className={classes.textField}
                    InputLabelProps={{
                      shrink: true,
                    }}
                  />
                </FormControl>
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={self.state.AddressesPOne[index].IsCurrentAddress}
                      onChange={self.handleChangeCheck('IsCurrentAddress')}
                      value="IsCurrentAddress"
                    />
                  }
                  label="Current Address"
                />
              </TabContainer>
          );
        })}
    </div>

handleChangeAddress = (addressIndex, personIndex, field) => event => {
    const Addresses = Object.assign({}, this.state.AddressesPOne);
    Addresses[addressIndex][field] = event.target.value;
    this.setState({
      AddressesPOne: Addresses,
    });
};

That is the code and for some reason after you change the data it does a reload and says that .map is not a function I don't have enough knowledge of javascript to be able to debug it myself, ive even shown another developer and he has no clue what is going on.

Answer 1

You need to create new array instead of new object in handle change. So change

const Addresses = Object.assign({}, this.state.AddressesPOne);

to

const Addresses = Object.assign([], this.state.AddressesPOne);

Answer 2

In handleChangeAddress you are setting Addresses to be an object with Object.assign() , and then setting that object to the state. Objects don't have a .map method.

If you generated and returned an array instead this should work.