Why the React strap media object doesn't render the image

Question

I'm new to React and have tried building a simple application. Also, I have used reactstrap in it. But it's not displaying the images which I have put in the public/assets/images folder. I have tried numerous times maybe the Media object might not be compatible.

Also, I am dynamically rendering the image item, it is an array placed in src/shared/leader.js .

This is the leader.js file containing the array, in the format.

 {
    id: 0,
    name: 'Peter Pan',
    image: '/assets/images/alberto.png',
    designation: 'Chief Epicurious Officer',
    abbr: 'CEO',
    featured: false,
  },

Next is my function RenderLeader which is making use of this array, but the items are not rendering.

function RenderLeader(leader){
    return(

        <Media tag="li" key={leader.id} className="col-12 mt-5" >
            <Media left middle>
                <Media style={imgStyle} object src={leader.image} alt={leader.name} />
            </Media>
            <Media body className="ml-5">
                <Media heading>{leader.name}</Media>
                <p>{leader.designation}</p>
            </Media>
        </Media>


    );
}

Here is how I am calling this function

    <RenderLeader item={props.leader} />

Answer 1

you're passing the item prop, not leader prop. Change item={props.leader} for leader={props.leader} and the Functional Component do it function RenderLeader({ leader }) .