Q:

Changing image via passing img src through state not working

I have a picture I've imported as the default value for the image: prop in state, It shows but it doesnt change when I try to change the value via the component in another component
Here is the child component of a webpage component
import React, { Component } from 'react';
import YellCubePlant from '../imgs/CPC Yellow Cube Planter.jpg'
import AubSkinnyPlant1 from '../imgs/CPC Aubergine SKINNY PILLAR Planter (P).jpg'
import AubSkinnyPlant2 from '../imgs/CPC Aubergine SKINNY PILLAR Planter.png'
import OliveSkinnyVase from '../imgs/CPC Olive Green SKINNY VASE Planter.png'

class Item extends Component {
    constructor(props) {
        super(props)

        this.state = {
            image : YellCubePlant,
        }

    }
  render() {
    return (

       <div className="item">
           Item Name
           <img src={this.state.image} alt="placeholder"></img>
       </div>

    );
  }
}

export default Item;

and here is the parent component which this is nested and I try to change the states image value. As seen with the <Item image={AubSkinnyPlant1}/>
import React, { Component } from 'react';
import Item from '../item';
import YellCubePlant from '../../imgs/CPC Yellow Cube Planter.jpg'
import AubSkinnyPlant1 from '../../imgs/CPC Aubergine SKINNY PILLAR Planter (P).jpg'
import AubSkinnyPlant2 from '../../imgs/CPC Aubergine SKINNY PILLAR Planter.png'
import OliveSkinnyVase from '../../imgs/CPC Olive Green SKINNY VASE Planter.png'

class Collection extends Component {
  render() {
    return (
     <div className="container-fluid"> 

       <h1>
         The Collection
       </h1>

       <div className="colltext">
          Our collection of products within the Landscape exhibition.
       </div>
       <div>

       </div>

       <Item image={AubSkinnyPlant1}/>
       <Item />
       <Item />
       <Item />
       <Item />
       <Item />
       <Item />
       <Item />

     </div>
    );
  }
}

export default Collection;

IT just shows the image which is the default in state from my Item component, why is this?

A:

Since you use the image from the component state, it will not be changed when given an image prop from the parent component.
You could just use the prop given by the parent component and use YellCubePlant as a default value instead.
class Item extends Component {
  render() {
    const { image = YellCubePlant } = this.props;

    return (
      <div className="item">
        Item Name
        <img src={image} alt="placeholder" />
      </div>
    );
  }
}

