export default function CharacterDetails() {
const { id } = useParams();
const url = https://rickandmortyapi.com/api/character/${id};
const [character, setCharacter] = useState({});
useEffect(() => {
fetch(url)
.then((res) => res.json())
.then((json) => {
setCharacter(json);
})
.catch(console.err);
}, []);
return (
Hello, my name is {character.name}.{" "}
I am currenltly {character.status}.
I am a {character.gender} {character.species}.
{" "}
I am from planet {character.origin?.name}.
);
}
This code snippet is from our CharacterDetails component. We are most proud of this code snippet because we were able to get the correct data from the api and manipulate that data in a format that we desired.
export default function CharacterDetails() {
const { id } = useParams();
const url =
https://rickandmortyapi.com/api/character/${id};const [character, setCharacter] = useState({});
useEffect(() => {
fetch(url)
.then((res) => res.json())
.then((json) => {
setCharacter(json);
})
.catch(console.err);
}, []);
return (
Hello, my name is {character.name}.{" "}
I am currenltly {character.status}.
{" "}I am a {character.gender} {character.species}.
I am from planet {character.origin?.name}.
);
}
This code snippet is from our CharacterDetails component. We are most proud of this code snippet because we were able to get the correct data from the api and manipulate that data in a format that we desired.