React.js：如何使用两个不同的独立 Button 组件下载两个不同的文件？

Question

I have got two buttons as components that need to download two different files, but so far both buttons download the same file that is no surprise for me. I have tried different solutions, with useState() and without, but none of them seem to be working. I know I am missing logic here, but I do not understand where I am missing it. How do I download a different file when clicking the first button, and download another file when clicking on another button? Should there be something that I should recap on, too?

Here is the code:

Hero.js (Parent component)

import Button from "../../components/UI/Button/Button";

const Hero = () => {

  return (
    <div>
      <div>
        <Button>CV (English)</Button>
        <Button>CV (Another Language)</Button>
      </div>
    </div>
  );
};

export default Hero;

Button.js (Child component)

import cv from "../../../assets/files/CV English.pdf";
import anotherLanguage from "../../../assets/files/anotherLanguage.pdf";

const Button = (props) => {
  const file = cv;

  return (
    <button>
      {file === cv ? (
        <a href={cv} download="CV English">
          {props.children}
        </a>
      ) : (
        <a href={anotherLanguage} download="CV Another Language">
          {props.children}
        </a>
      )}
    </button>
  );
};

export default Button;

Answer 1

You could pass a language prop to the button like this:

      <div>
        <Button language="en">CV (English)</Button>
        <Button>CV (Another Language)</Button>
      </div>

And then use it in the Button component like this:

import cv from "../../../assets/files/CV English.pdf";
import anotherLanguage from "../../../assets/files/anotherLanguage.pdf";

const Button = (props) => {
  const file = cv;

  return (
    <button>
      {props.language === "en" ? (
        <a href={cv} download="CV English">
          {props.children}
        </a>
      ) : (
        <a href={anotherLanguage} download="CV Another Language">
          {props.children}
        </a>
      )}
    </button>
  );
};

export default Button;