import React, { useEffect, useState } from "react";
import { Card, CardColumns, Button } from "react-bootstrap";
function App() {
const [data, setData] = useState([]);
useEffect(() => {
fetch("https://rickandmortyapi.com/api/character/")
.then((res) => res.json())
.then((data) => setData(data.results));
}, []);
return (
<CardColumns>
{data.map((character) => (
<Card className="m-4" key={character.id} style={{ width: "20rem" }}>
<Card.Img variant="top" src={character.image} />
<Card.Body>
<Card.Title>{character.name}</Card.Title>
<Card.Text>{character.species}</Card.Text>
<Button variant="primary" href={character.url} target="_blank">
More Info
</Button>
</Card.Body>
</Card>
))}
</CardColumns>
);
}
export default App;
Last active
September 23, 2020 09:27
-
-
Save lelouchB/b81d22623500db2d97f09e1d7ecbcc0a to your computer and use it in GitHub Desktop.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment