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
           }
        });
      };