Clash Royale CLAN TAG#URR8PPP

Uncaught Error: Objects are not valid as a React child when trying to render html in react

Here's a simple version my app

constructor(props)
super(props);

let images = JSON.parse(localStorage.getItem('images'))
images = images? images :
this.match = props.match
// the images part of this state should be handled by the app component but for now i'll use localStorage
console.log('constructor', images);

this.state =
count: 0,
increment: 9,
images: images


if (this.state.images.length === 0)
this.getImages(this.state);



build_gallery_items = (images) =>
return images.map((src, id) =>

return (
<div className="item col s4" key=src>
<a data-fancybox="gallery" href=src data-caption=`<a href='$src' download>Download</a>`>
<img className="image-item" src=src alt="Stuff about this" />
</a>
</div>
);
);


getImages = (state) =>
let url = './server/getImages.php'

axios.post(url, state)
.then(res =>

this.setState(
images: this.state.images.concat(this.build_gallery_items(res.data.images))
, () =>
localStorage.setItem('images', JSON.stringify(this.state.images))
)
)
.catch(err =>
console.log(err);
)


render()

// console.log('images', this.state.images);
return (


<div className='wrap'>
<h2>Image Gallery</h2>
<div className="container">
<div className='row'>
this.state.images
</div>
</div>
</div>

)



the ajax call works fine stores it in localstorage and displays the images. Then when I refresh the page to use what's currently in localstorage I get the "Objects are not valid error". this is what's printed out in my console before i attempt to use it.

It clearly looks like it's an array, and by placeing .toArray causes it to go undefined.

How do I remedy this problem of mine.

Any help is much appriciated. thanks.

2 Answers
2

Instead of storing the JSX in state (which is just React.createElement calls under the hood), you could store just the image data array in state and derive the JSX in the render method instead.

React.createElement

This way the images array will be stringified and parsed correctly.

images

getImages = state =>
let url = "./server/getImages.php";

axios
.post(url, state)
.then(res =>
this.setState(

images: res.data.images
,
() =>
localStorage.setItem("images", JSON.stringify(this.state.images));

);
)
.catch(err =>
console.log(err);
);
;

render()
return (
<div className="wrap">
<h2>Image Gallery</h2>
<div className="container">
<div className="row">
this.state.images.map((src, id) => (
<div className="item col s4" key=src>
<a
data-fancybox="gallery"
href=src
data-caption=`<a href='$src' download>Download</a>`
>
<img
className="image-item"
src=src
alt="Stuff about this"
/>
</a>
</div>
))
</div>
</div>
</div>
);



The reason behind the error is you are including Object this.state.images in render return. If instead of that you will write this.state.images.length, it will render properly. You'll need to either reference a property of the object that is a string value or convert the Object to a string representation that is desirable. One option might be JSON.stringify if you actually want to see the contents of the Object. Also you might be thinking images is array which is true but in JS world its considered as an object. If for any array you will do typeof yourArr, it will say Object

this.state.images

this.state.images.length

JSON.stringify

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.