Warning: Failed prop type: Invalid prop `items[0]` of type `string` supplied to `ImageGallery`, expected `object`

David.Warwick

I know this probably seems trivial, but I am a newbie and I am obviously missing something.

I am trying to create an array of what appear to be JSON objects to pass to react-image-gallery. See here NPM react-image-gallery

According to that web page, I need to do something like:

const images = [
  {
    original: 'https://picsum.photos/id/1018/1000/600/',
    thumbnail: 'https://picsum.photos/id/1018/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1015/1000/600/',
    thumbnail: 'https://picsum.photos/id/1015/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1019/1000/600/',
    thumbnail: 'https://picsum.photos/id/1019/250/150/',
  },
];
 
class MyGallery extends React.Component {
  render() {
    return <ImageGallery items={images} />;
  }
}

However, note, I am not using the thumbnail, so I only need original.

Here is my code:


import React, { Fragment, useState } from 'react';
import axios from 'axios';
import ImageGallery from 'react-image-gallery';
//import '../image-gallery.css'
import "react-image-gallery/styles/css/image-gallery.css";

const AddNewItem = () => {
  var [fileState, setFile] = useState([]);

  var fileObj = {};

//bunch of irrelevant code

 //Image Preview
  const onChange = e => {

    //setFile(e.target.files[0]);
    fileObj = e.target.files[0];

    console.log("AddNewItem fileObj: ", fileObj)

    setFile(fileState => [...fileState, JSON.parse(`"orignal: ${URL.createObjectURL(fileObj)}"`)]);
}

//bunch of irrelevant code

  return (
    < Fragment >
      {console.log("AddNewItem onChange fileState: ", fileState)}

      <form id="myForm" onSubmit={onSubmit}>
        <div className="container">
          <div className="row ">
            <div className="col">              
             
              <label className="mt-3 mb-0">Image:</label><br />
              <input type="file" id="image" name="image" onChange={onChange}></input><br />
              <button type="submit" className="mt-3">Submit</button>

            </div>
           
            <div className="col">
              {fileState.length > 0 ? <ImageGallery items={fileState} showThumbnails={false} /> : ""}
            </div>
          </div>
        </div>
      </form>

    </Fragment >
  );

When I upload my first image, fileState is equal to the following, and I get the Failed prop type error:

Image showing array and error

When I upload a second image, fileState looks like:

Image showing fileState with 2 images

And when there are 2 images in fileState, I do not get the error.

And no images are displayed by the gallery. I do get the arrow and play / pause button, but I do not see any images. But I am not entirely sure I have imported the image-gallery.css correctly according to the npm webpage mentioned above. But if that is an issue, then I will post another question on here.

Am I doing something wrong in the way that I am constructing fileState? If so, what can I do to fix it? Thanks.

nicodp

You should pass an object to JSON.parse:

JSON.parse(`{"original": "${URL.createObjectURL(fileObj)}"}`)

Also, you have a typo, the key should be original.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

GraphQL: Warning: Failed prop type: Invalid prop `query` of type `object` supplied to `StaticQuery`, expected `string`

React Warning: Failed prop type: Invalid prop of type `Object` supplied

Warning: Failed prop type: Invalid prop `data` of type `object` supplied to `Carousel`, expected `array`

Warning: Failed prop type: Invalid prop `value` of type `number` supplied to `TextInput`, expected `string`

Warning: Failed prop type: Invalid prop `defaultValue` of type `string` supplied to `AutoCompleteSearch`, expected `function`

Failed prop type: Invalid prop `match.params` of type `object` supplied to `Page`, expected `string`

Failed prop type: Invalid prop `children` of type `string` supplied to `DetailField`, expected `object`

Failed prop type: Invalid prop `answer` of type `string` supplied to `AnswerItem`, expected `object`

Warning: Failed prop type: Invalid prop `open` of type `function` supplied to `ForwardRef(Dialog)`, expected `boolean`. at Dialog

Warning: Failed prop type: Invalid prop `tag` supplied to `NavLink`

Warning: Failed prop type: Invalid prop 'source' supplied to 'Image'

warning: failed prop type: invalid prop 'backgroundcolor' supplied to view:

GETTING ERROR : Warning: Failed prop type: Invalid prop `children` supplied to `Form`, expected a ReactNode

Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Select)`, expected a ReactNode

Failed prop type: Invalid prop `opacity` of type `object` supplied to `RCTView`

Failed prop type: Invalid prop `onClick` of type `object` supplied to `ButtonBase`, expected `function`

Failed prop type: Invalid prop `onClick` of type `object` supplied to `Button`, expected `function`

Why do I get Failed prop type: Invalid prop `onAnimationFinish` of type `object` supplied to `LottieView`, expected a `funtion`

Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`

Failed prop type: Invalid prop `responsive` of type `string` supplied to `Image`, expected `boolean`

Warning: Failed prop type: Invalid prop `source` supplied to `Image`. I have saved path of the image with require() in an object

Warning: Failed propType: Invalid prop of type `array` expected `object` with React

Failed prop type: Invalid prop `to` supplied to `Redirect`

How to Solve ERROR Warning: Failed prop type: Invalid prop `style` of type `array` supplied to `Row`, expected `object` (react-native-table-component)

Invalid prop `component` of type `object` supplied to `Route`, expected `function`

Invalid prop: type check failed for prop "cellClass". Expected String with value "[object Object]", got Object

[Vue warn]: Invalid prop: type check failed for prop "productCartData". Expected Object, got String with value "[object Object]"

Failed prop type: Invalid prop of type `function` supplied expected a single ReactElement

Invalid prop type supplied