<repo_name>Abeelie/Redux-Meme-Generator-Exercise<file_sep>/src/components/Meme/Meme.js
import React from "react";
import {Button} from "react-bootstrap";
import "./meme.css"

const Meme = (props) => {

  const handleDeleteMeme = () => props.deleteMeme(props.id);
  
  return (
    <div align="center">
      <div className="container">
        <span className="top-text">{props.topText}</span>
        <img src={props.url} alt="image" />
        <span className="bottom-text">{props.bottomText}</span>
        <div align="center">
            <Button onClick={handleDeleteMeme}>
                DELETE
            </Button>
        </div>
      </div>
    </div>
    )
}

export default Meme;
<file_sep>/src/components/MemeContainer/MemeContainer.js
import React from "react";
import Meme from "../Meme/Meme";
import MemeForm from "../MemeForm/MemeForm";
import { useSelector, useDispatch } from "react-redux";
import { Container } from "react-bootstrap";

const MemeContainer = () => {
    const memes = useSelector(store => store.memes);
    const dispatch = useDispatch();
    const addMeme = (newMeme) => dispatch({ type: "ADD_MEME", meme: newMeme });
    const deleteMeme = (id) => dispatch({type: "REMOVE_MEME", id });
      
    return(
        <div>
            <MemeForm addMeme={addMeme} />
            <Container>
            {memes.map(meme => (
            <Meme
                key={meme.id}
                topText={meme.topText}
                bottomText={meme.bottomText}
                url={meme.url}
                deleteMeme={() => deleteMeme(meme.id)}
                />
            ))}
            </Container>
        </div>
    )
}

export default MemeContainer