<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>
// App component (parent)
const App = ({}) => {
  const images = [
    {
      src: "https://tutorial.tips/images/reactjs.png",
      width: "200px",
      height: "200px",
      altText: "React Logo",
      source: "Tutorial.Tips"
    },
    {
      src: "https://tutorial.tips/images/javascript.png",
      width: "200px",
      height: "200px",
      altText: "Angular Logo",
      source: "Tutorial.Tips"
    }
  ];

  return (
    <>
      <Image {...images[0]}/>
      <Image {...images[1]}/>
    </>
  );
};

// Image component (child)
const Image = ({ src, altText, width, height, source }) => {
  return (
    <figure
      style={{
        border: "1px dashed cyan",
        width: "250px",
        height: "250px",
        padding: "5px"
      }}
    >
      <img src={src} alt={altText} width={width} height={height} />
      <figcaption>Source {source}</figcaption>
    </figure>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react/umd/react.development.js
  2. https://unpkg.com/react-dom/umd/react-dom.development.js