React

You can play around with this live example and add new features, styles and so much more.

Hint

Uncomment the following line:

<div className="card--text">{character.species}</div>

PS: remove {/* */}

React

Live Editor

function App() {
  const [data, setData] = useState([]);

  const cardStyle = {
    boxShadow: "0 5px 8px 0 rgba(0, 0, 0, 0.3)",
    padding: "12px",
    marginBottom: "10px",
    textAlign: "center",
    backgroundColor: "#fafafa",
  };
  const rootStyle = {
    margin: "0 auto",
    width: "max-content",
    padding: "0 10px",
    color:"purple",
    fontFamily:"Verdana"
  };
  useEffect(() => {
    fetch("https://finalspaceapi.com/api/v0/character?limit=5")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div className="root" style={rootStyle}>
      {data.map((character) => (
        <div className="card" style={cardStyle} key={character.id}>
          <div className="card--image">
            <img src={character.img_url} alt={character.name} />{" "}
          </div>
          <div className="card--title">{character.name}</div>
        {/* <div className="card--text">{character.species}</div>*/}
        </div>
      ))}
    </div>
  );
}

Result

Loading...

Axios

{/* Not a Live Editor*/}
import axios from 'axios'

function App() {
  const [data, setData] = useState([]);

  const cardStyle = {
    boxShadow: "0 5px 8px 0 rgba(0, 0, 0, 0.3)",
    padding: "12px",
    marginBottom: "10px",
    textAlign: "center",
    backgroundColor: "#fafafa",
  };
  const rootStyle = {
    margin: "0 auto",
    width: "max-content",
    padding: "0 10px",
  };
  useEffect(() => {
    axios.get("https://finalspaceapi.com/api/v0/character?limit=5")
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div className="root" style={rootStyle}>
      {data.map((character) => (
        <div className="card" style={cardStyle} key={character.id}>
          <div className="card--image">
            <img src={character.img_url} alt={character.name} />{" "}
          </div>
          <div className="card--title">{character.name}</div>
        {/* <div className="card--text">{character.species}</div>*/}
        </div>
      ))}
    </div>
  );
}