andrew wilson andrew wilson - 1 year ago 144
React JSX Question

on reload .map is not a function reactjs

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 Source

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);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download