O'Reilly logo

Programming Elm by Jeremy Fairbank

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required