如何将信息从 Form 组件传递到另一个组件以呈现存储在对象数组中的动态数据？

Question

我正在做一个模仿狗百科全书的小测试。有一个 Data.js 存储所有信息（狗名、原产地……另一个组件 Form.jsx 呈现一个下拉菜单，您可以在其中选择您的狗。该组件使用 .map 方法扩展选项。最后一个名为 DogCard 的组件，一旦您在 Form 组件中选择一只狗，这个组件应该呈现存储在 Data.js 中的所有信息。我想我必须传递道具，但我不知道该怎么做。

这是表单组件：

import React, { useState } from 'react';
import { dogs } from '../components/Data';
import '../stylesheets/Form.css';

function Form ({onDogChange}) {

  const [selectedDog, setSelectedDog] = useState('Pug')

  const handleChange = e => {
    setSelectedDog(e.target.value)
    onDogChange(selectedDog)
  }

  return (
    <>
      <label className="choose" htmlFor='dogs'>Choose your dog:
      <select value={selectedDog} onChange={handleChange}>
        {dogs.map((dog) => (
          <option
            className="option" 
            key={dog.name} 
          >
            {dog.name}</option>
        ))}
      </select>
      </label>
      <p>Your favorite dog: {selectedDog}</p>
    </>
  )
}

export default Form;

这是硬编码的 DogCard 组件：

import React, {useState} from 'react';
import Form from './Form';
import { dogs } from '../components/Data';

function DogCard() {


  return (
    <>
      <Form />
      <div className="container">
        <img 
          className="fotodog"
          src={`../../public/imagenes/${dogs[0].image}.jpg`}
          alt='texto'
          />
        <div className="text-container">
          <p className="dogname">{dogs[0].name}</p>
          <p className="origin">{dogs[0].origin}</p>
          <p className="phrase">{dogs[0].phrase}</p>
          <p className="trivia">{dogs[0].trivia}</p>  
        </div> 
      </div>
    </>
  )
}

export default DogCard

最后是一个数据存储方式的例子：

export const dogs = [{
  id: 1,
  name: 'Pug',
  image: 'pug',
  alttext: 'Image of a pug',
  origin: 'China',
  phrase: '50% doggy 50% piggy',
  trivia: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
},
{
  id: 2,
  name: 'Greyhound',
  image: 'greyhound',
  alttext: 'Image of a greyhond ',
  origin: 'España',
  phrase: 'Run run run!',
  trivia: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident'
},
{
  id: 3,
  name: 'Husky',
  image: 'husky',
  alttext: 'image of a husky',
  origin: 'Rusia',
  phrase: 'So hot here!',
  trivia: 'Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt'
}

还有一个 App 组件，而不是渲染每个组件

这几天我一直在研究这个，我看了很多视频并阅读了关于传递道具的信息，但我不知道如何让这个东西起作用，我试图传递一个道具“onDogChange”，但我不完全知道如何通过它。也尝试了 .find 方法，但它不起作用。谁能帮帮我？

提前致谢！