1.
import React from 'react'; import {Link} from 'react-router-dom';
function DisplayItems(props) {
return (
<>
<li className='items__item'>
<Link className='items__link' to={props.path}>
<figure className='items__pic-wrap' data-category={props.label}>
<img
className='items__img'
alt='Product Image'
src={props.src}
/>
</figure>
<div className='items__info'>
<h5 className='items__text'>{props.text}</h5>
</div>
</Link>
</li>
</>
); }
export default DisplayItems;
It displays the items in an organized mannerClick here for image reference
2.
import React from 'react'; import { Link } from 'react-router-dom';
function DisplayItems(props) {
return (
<>
<li className='items__item'>
<Link className='items__link' to={props.path}>
<figure className='items__pic-wrap' data-category={props.label}>
<img
className='items__img'
alt='Product Image'
src={props.src}
/>
</figure>
<div className='items__info'>
<h5 className='items__text'>{props.text}</h5>
</div>
</Link>
</li>
</>
); }
export default DisplayItems;
The output is as desired, with images displaying correctly and inlineView styled image here