Programming Elm

Display Uploaded Images

Now that you can upload images, let’s display them. In this section, you will use a port to send the new array of images back to Elm. You will also use flags to send Elm the note’s images when embedding the application.

Receive New Images with a Port

When the App component updates its note, it re-renders. It also re-renders the ImageUpload component. Because you pass the note’s images into the images prop, ImageUpload can react to send the new images to Elm.

React has another special method called componentDidUpdate that it calls anytime a component updates after receiving new props from its parent component. You can leverage that inside ImageUpload to grab the new images and send them to Elm. Inside src/ImageUpload.js ...