i have a random list of 10 dogs and fetching it from api https://dog.ceo/api/breeds/image/random/10 and with every refresh i get another 10 dogs list so my question is how do i make favorite list out of it and show it on another page. I dont want to use Localstorage or redux or 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;

and lastly here i have a favorite button in every dog image which i want to make favorite on click.

Dog.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;