<div id="app"></div>

body {
    font-family: "Open Sans", Helvetica, monospace;
    font-size: 1.2em;
}

.wrapper {
    display: flex;
}

const styles = {
    border: "1px solid #ccc",
    borderRadius: "5px",
    padding: "17px 17px 20px 17px",
    margin: "7px",
};

// This component creates a new tag called <Image>
function Image(props) {
    console.log("rendering an Image component with data:", props);
    return (
        <div className="image" style={styles}>
            <img src={props.src} alt={props.alt} />
            <div class="caption" style={{margin: "7px 13px"}}>Photo of {props.alt}</div>
        </div>
    );
}

const cats = [
    { url: "https://placekitten.com/200/200", name: "Alice"},
    { url: "https://placekitten.com/201/199", name: "Bob"},
    { url: "https://placekitten.com/199/201", name: "Cat S."},
];

const App = () => <div class="wrapper">{cats.map(cat => <Image src={cat.url} alt={cat.name} />)}</div>;
    
ReactDOM.render(
    <App />,
    document.getElementById("app")
);