ImageInputList - Adding a item to state array - Code Correction

While following this part of the course I could not for the life of me get the code working. The image would simply not show up in the image list. After some debugging I found that the uri was not getting added to the array.

This error was in Section 10 of Native Features - ‘Building ImageInputList - Basics’. The issue was happening when testing the new component in App.js.

If anyone got stuck on this section you can find the corrected code below.

Correct Code:

const handleAdd = (uri) => {
setImageUris((imageUris) => […imageUris, uri]);

The original code was:

const handleAdd = (uri) => {
setImageUris([…imageUris], uri);

Cool, thanks!
You did not state the source file, which would help even more.
Is it AppFormImagePicker.js ?

@JerryC, No Problem.

Sorry I should have been more specific. This was in Section 10 of Native Features - ‘Building ImageInputList - Basics’.

This was when testing the ImageInputList.js component in app.js

1 Like

@AshNZ, Awesome find.
Mosh experimented a lot with App.js where I had tons of code commented out for the next time Mosh started fresh with App.js (probably as you had done also).

All good, thanks @AshNZ! I appreciate you helping others!!!

1 Like

I am still having an issue with your corrected example.

const handleAdd = (uri) => {
setImageUris((imageUris) => […imageUris, uri]);
Even then this throws me
Screenshot 2021-06-24 at 4.07.35 PM

Any help is much appreciated.

The useState should use an empty array.
const [imageUris, setImageUris] = useState([]); - My updated code
const [imageUris, setImageUris] = useState(); Original

setImageUris([…imageUris, uri]) Works Fine.