React CardImg not rendering

Question

I'm trying to get my React CardImg to render with no luck. I'm importing the photos array, passing it in state, and trying to render it on line's 40 CardImg component. I've tried changing the file paths with no luck. Any help would be appreciated. Images folder is inside the public folder.

import React, { Component } from 'react';
import { CardTitle, Jumbotron, Card, CardBody, CardHeader, CardImg, Button, Modal, ModalHeader, ModalBody, Form, FormGroup, Input, Label, Col, Row, InputGroup, CardSubtitle, CardImgOverlay } from 'reactstrap';
import DatePicker from "react-datepicker";
import { PHOTOS } from '../shared/photos';
import "react-datepicker/dist/react-datepicker.css";


class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isModalOpen: false,
            photos: PHOTOS,
        };
        this.toggleModal = this.toggleModal.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(values) {
        this.props.postQuery(values);
    };
    toggleModal() {
        this.setState({
            isModalOpen: !this.state.isModalOpen
        });
    }

    render() {
        return (
            <React.Fragment>
                <Jumbotron id="homePage"></Jumbotron>
                <div className="container">
                    <div className="row">
                        <div className="col-sm-6">
                            <h1>Maximum Experience</h1>
                            <h2>Minimum Weight</h2>
                        </div>
                        <div className="col-sm-6">
                            <Card>
                                <CardImg src={this.state.photos.image} width='100%' alt="Hiking" />
                            </Card>
                        </div>
                    </div>

photos.js

export const PHOTOS = [
    {
        id: 0,
        name: 'Card Home Image',
        image: 'images/homeCard.jpg',
    }
]

Answer 1

Your this.state.photos is an array. So you need {this.state.photos[0].image}.

When you have more than one photo objects in the array you need to iterate over it to render all photos, something like

{
  this.state.photos.map(photo => (
      <Card>
         <CardImg src={photo.image} width='100%' alt="Hiking" />
      </Card>
  )
}