Trouble loading an objects src in ReactJS - reactjs

Question

I am still a bit new to React and posting on this forum so please bear with me. I currently have two React files which I believe are talking to each other, but there seems to be a disconnect when trying to pull information from an object. One of my React files is:
import React, { Component } from 'react';
import './App.css';
export class App extends React.Component {
render() {
const src = this.props.src;
const alt = this.props.alt;
const width = this.props.width;
const height = this.props.height;
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Will''s weird online shop thing I have no idea about</h1>
</header>
<p className="App-intro">
Click the arrows to browse through the different items.
</p>
<img src={src} alt={alt} width={width} height={height} />
</div>
);
}
}
export default App;
and the other is :
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {App} from './App';
import registerServiceWorker from './registerServiceWorker';
import dogbag from './images/dogbag.jpg';
const DogBagObj = {
src: dogbag,
alt: 'Cute dog handbag',
height: '100px',
width: '70px'
};
const Items = [
DogBagObj,
'https://i.pinimg.com/736x/0b/f4/bd/0bf4bd031a363fc68b56afe6289f450f--random-pokemon-pokemon-stuff.jpg',
'https://pbs.twimg.com/profile_images/881211588748988416/zQL9OLuc_400x400.jpg',
'https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Sun-crypto-accelerator-1000.jpg/1200px-Sun-crypto-accelerator-1000.jpg'
]
class OnlineStore extends React.Component {
constructor(props) {
super(props);
this.state = { currentItem: 0 };
this.interval = null;
this.changeItem = this.changeItem.bind(this);
}
changeItem() {
let current = this.state.currentItem;
let next = ++current % Items.length;
this.setState({ currentItem: next });
}
componentDidMount() {
this.interval = setInterval(this.changeItem, 1000);
}
render() {
const src = Items[this.state.currentItem];
return <App src={src} />;
}
}
ReactDOM.render(
<OnlineStore />,
document.getElementById('root'));
registerServiceWorker();
I am confident that I have correctly imported the dogbag.jpg from the image folder and the three images which have direct links to them load correctly.
I feel like my problem lies within getting the DogBagObj.src to correctly read. If I change DogBagObj in the Items array to dogbag it will load the image but I would also like the ability to control multiple tags for each image (such as the alt, height and width). Is there some minor syntax error I am over looking or is this a problem which would be much harder to remedy? Thank you for your time.

Answer 1

Your items array contains multiple data structure but you treat it as if it contains only one.
Either use strings only or objects only.
For example..
Strings only:
const Items = [
DogBagObj.src,
'https://i.pinimg.com/736x/0b/f4/bd/0bf4bd031a363fc68b56afe6289f450f--random-pokemon-pokemon-stuff.jpg',
'https://pbs.twimg.com/profile_images/881211588748988416/zQL9OLuc_400x400.jpg',
'https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Sun-crypto-accelerator-1000.jpg/1200px-Sun-crypto-accelerator-1000.jpg'
]
Or use objects with similar data structure:
const Items = [
DogBagObj,
{src:'https://i.pinimg.com/736x/0b/f4/bd/0bf4bd031a363fc68b56afe6289f450f--random-pokemon-pokemon-stuff.jpg'},
{src:'https://pbs.twimg.com/profile_images/881211588748988416/zQL9OLuc_400x400.jpg'},
{src:'https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Sun-crypto-accelerator-1000.jpg/1200px-Sun-crypto-accelerator-1000.jpg'}
]
And in your render method:
render() {
const src = Items[this.state.currentItem].src;
return <App src={src} />;
}