I'm setting the src of my img in React to `this.props.file[0].path` but this state hasn't been set yet so I'm getting `TypeError: Cannot read property 'path' of undefined`. How I'm setting the state and getting the `file[0].path` is I'm adding and posting the state of `event.target.files[0]` to my server then adding the `req.file.path` from the server request to my database. I'm then fetching the data from my database in `componentDidMount()` by album\_id which I saved to my database by using the `req.params.id` and adding the data to my state. Then I'm sending the state to my ImageUpload component and then using that to set the src of the img. I'm wondering what I do if that data hasn't been set in the state yet?

**ImageUpload component**

```
<input type="file" accept="image/*" onChange={this.props.onChange} />

<img style={{ width: "300px", height: "300px"}} src={"http://localhost:3000/" + this.props.file[0].path} />

```

**Parent Component**

```
    this.state = {
          file: null,
        };

componentDidMount() {
  const { match: { params} } = this.props;
    fetch(`http://localhost:3000/albums/${params.albumId}/images`)
    .then((response) =>
      response.json())
    .then((data) => {
          console.log(data)
          this.setState({ file : data });
          console.log(this.state.file)
        }).catch((error) => {
            console.log("Error " + error)
          })

}

    onChange(event) {
        this.setState({
          file: event.target.files[0],
          loaded: 0,
        });
      }

   onClickHandler = () => {
    const { match: { params} } = this.props;
    const data = new FormData()
    data.append('file', this.state.file)
    axios.post(`http://localhost:3000/albums/${params.albumId}/upload`, data, {

    }).then(res => {
      console.log(res.statusText)
    })
  }

```

**Node JS - image-upload.js**

```
const db = require('./queries');

const getImageByAlbumId = (request, response) => {
  const { id }  = request.params;

  db.pool.query('SELECT * FROM file WHERE album_id = $1 ORDER BY album_id ASC', [id], (error, results) => {
    if (error) {
      throw error
    } else {
    response.status(200).json(results.rows)
   }
  })
}

const imageUpload = (req, res) => {
    var id = parseInt(req.params.id);
    message: "Error! in image upload."
     if (!req.file) {
          console.log("No file recieved");
          message = "Error! in image upload."
          console.log("status: danger");
     } else {
        console.log('file recieved');
        console.log(req.file);

         var query = db.pool.query('INSERT INTO file (name, type, size, path, album_id) VALUES ($1, $2, $3, $4, $5) ON CONFLICT (album_id) DO NOTHING RETURNING *', [req.file.filename, req.file.mimetype, req.file.size, req.file.path, id], (err, result) => {
            console.log('inserted data')
            if (err) {
                console.log(err)
            } else {
               console.log('inserted data')
               console.log(result)
         }
         });
         message = "Successfully uploaded";
         console.log("status: success");
     }

}

```

**NodeJS - index.js**

```
var storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'public')
    }, 
    filename: (req, file, cb) => {
        cb(null, Date.now() + '-' +file.originalname)
    }
})
app.use('/public', express.static('public'));

var upload = multer({ storage: storage });
app.use(upload.single('file'));

app.get('/albums/:id/images', image.getImageByAlbumId)
app.post('/albums/:id/upload', image.imageUpload);

```