Errors when initiating component.
Closed this issue · 4 comments
In my render method, I'm using the component as follows...
var images = [{
"src":"/app-proxy/_smc_image_util_v1/processImage?image=/we/ae33f263-a66b-4983-911e-0f1c4ed361bb/9f1edd82-52ac-440d-9e1a-f438201d62ad",
"title":"",
"description":"Don.jpg"
},{
"src":"/app-proxy/_smc_image_util_v1/processImage?image=/we/da171042-aae4-42a1-900b-109eb5a1b230/70c5e5f1-b5ef-4570-b7ed-f0c3e99ec75c",
"title":"",
"description":"Hydrangeas.jpg"
}]
var lightBox = ; //console warning/error shown below on this line.
activeComponent =
{lightBox}
In the console, this is displayed:
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Case
.
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of Case
.
Any ideas?
How are you importing the library? Can you show me how are you initializing the component?
Apologies for the poor code formatting in the first post, let's try again...
var Lightbox = require('react-lightbox-component');
//also tried
//import Lightbox from 'react-lightbox-component';
//...now in the render method
var images = [{
"src":"/app-proxy/_smc_image_util_v1/processImage?image=/we/ae33f263-a66b-4983-911e-0f1c4ed361bb/9f1edd82-52ac-440d-9e1a-f438201d62ad",
"title":"",
"description":"Don.jpg"
},{
"src":"/app-proxy/_smc_image_util_v1/processImage?image=/we/da171042-aae4-42a1-900b-109eb5a1b230/70c5e5f1-b5ef-4570-b7ed-f0c3e99ec75c",
"title":"",
"description":"Hydrangeas.jpg"
}]
var lightBox = <Lightbox images={images}/>;
activeComponent =(<div className="multimedia">
{lightBox}
</div>);
//...
It's worth noting that my images come from a service which explains the src attribute. If those urls are placed in an img tag, the returned image file is shown.
Try to define your Lightbox variable like this:
var Lightbox = require('react-lightbox-component').Lightbox;
Sorry for the poor documentation (or nonexistent)... I no had the time to complete it, but soon I will finish it.
Unconventional, but it did work. Thank you...I will post another issue regarding what was encountered when it displayed...but nice work!