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

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

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>  );}