Tengo una lista aleatoria de 10 perros y la obtengo de api https://dog.ceo/api/breeds/image/random/10 y con cada actualización obtengo otra lista de 10 perros, así que mi pregunta es ¿cómo hago una lista de favoritos? salir de él y mostrarlo en otra página. No quiero usar Localstorage o redux o context api.

DogHome.js

 import "bootstrap/dist/css/bootstrap.min.css"; import "../../Pages/Pages.css"; import DogList from "../Dog/DogList"; import React, { Component } from "react"; class DogHome extends Component { constructor(props) { super(props); this.state = { dogs: [], }; } async componentDidMount() { try { const url = "https://dog.ceo/api/breeds/image/random/10"; const response = await fetch(url); const data = await response.json(); this.setState({ dogs: data.message }); } catch (e) { console.error(e); } } render() { return ( <div className="home"> <DogList dogs={this.state.dogs} /> </div> ); } } export default DogHome;

DogList.js

 import React from "react"; import Dog from "./Dog"; import "../../Pages/Pages.css"; const DogList = (props) => { const dogsArray = props.dogs.map((dogURL, index) => { return <Dog key={index} url={dogURL} />; }); return ( <> <div className="doglist">{dogsArray}</div> </> ); }; export default DogList;

y, por último, aquí tengo un botón favorito en cada imagen de perro que quiero hacer favorito al hacer clic.

Perro.js

 import React from "react"; import { Button } from "react-bootstrap"; import "../../Pages/Pages.css"; const Dog = (props) => { return ( <div id="child"> <img style={{ width: 300, height: 300 }} src={props.url} alt="ten dogs list" /> <Button >Favorite</Button> </div> ); }; export default Dog;