Reactjs Material load defaultValue in TextField & Cannot read property 'map' of undefined

Question

I have two issue here.

1. Cant load defaultValue in TextField . I'm using reactjs material
2. When I start typing in input TextField . It's throwing error in below

Cannot read property 'map' of undefined

Can anyone tell where I made mistake?

ShipmentDetail.tsx

 interface ShipmentInterface { detail: any; } export class ShipmentDetail extends Component<any, ShipmentInterface> { constructor(props: any) { super(props); this.state = { detail: '' }; this.handleChange = this.handleChange.bind(this); // nameUpdate: this.state.detail.name; } componentDidMount() { this.getShipmentDetail(); } getShipmentDetail() { let { params } = this.props.match; params = params.id; axios .get(`http://localhost:3001/shipments/${params}`) .then((response: any) => { this.setState({ detail: response.data }); }); } handleChange = (event: any) => { event.preventDefault(); this.setState({ detail: { name: event.target.value } }); }; render() { return ( <Card className="Card"> <CardContent className="Card-Content"> <Grid container spacing={3}> <Grid item xs={12}> <div className="Card-Content__Header"> <TextField id="outlined-name" label="Name" defaultValue={this.state.detail.name || ''} className="Card-Content__Header--Title" onChange={this.handleChange} fullWidth={true} margin="normal" variant="outlined" /> </div> </Grid> // I believe second error comes from here <Grid item xs={12} className="Card-Content__Table"> {this.state.detail && this.state.detail.cargo.map((item: any, index: number) => ( <CargoList key={index} value={item} /> ))} </Grid> </Grid> </CardContent> </Card> ); } } export default ShipmentDetail;

db.json

 { "id": "S1002", "name": "PO89634, PO27X", "cargo": [ { "type": "Bikes model 27X", "description": "100 Bikes model 27X", "volume": "100" } ], "mode": "air", "type": "LCL", "destination": "Saarbrücker Str. 38, 10405 Berlin", "origin": "Shanghai Port", "services": [ { "type": "customs" } ], "total": "10000", "status": "COMPLETED", "userId": "U1001" }

Answer 1

The second error is because you're overwriting your state, you need to make sure you preserve the other props on detail , particularly cargo array:

handleChange = (event: any) => {
        event.preventDefault();
         this.setState({
           detail: {
            ...this.state.detail,
            name: event.target.value
           }
        });
      };