React.js Как передать данные из родительского компонента в дочерний компонент

Я пытаюсь сделать запрос API с помощью поиска и по идентификатору и хочу передать этот идентификатор другому компоненту, который будет отображать данные идентификатора на другой странице при нажатии кнопки, но я не могу передать эти данные другому компоненту, пожалуйста, может ли кто-нибудь помочь мне с этим? Я пытаюсь изучить React и много исследовал, но не смог найти решение. Передача данных от родителя к ребенку и наоборот сбивает меня с толку. любая помощь будет действительно оценена.

Родительский компонент

import React from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import ProductDetailPage from "./productdetailpage";

class ProductLists extends React.Component {
  state = {
    movies: [],
    name: "",
    para: "No Data"
  };

  onchange = event => {
    this.setState({ name: event.target.value });
  };

  onsubmit = event => {
    event.preventDefault();
    const nameValue = this.state.name;
    axios
      .get(`http://www.omdbapi.com/?apikey=bcfe7e46&s=${nameValue}`)
      .then(res => {
        const movies = res.data.Search;
        this.setState({ movies });
      });
  };

  viewDetail = id => {
    axios.get(`http://www.omdbapi.com/?apikey=bcfe7e46&i=${id}`).then(res => {
      const movieId = res.data;

      //below i'm trying to pass the movieId into other component
      const moviedata = <ProductDetailPage passMovieId={movieId} />;
      console.log(moviedata.props);
    });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.onsubmit}>
          <input
            type="text"
            placeholder="Search Movie"
            onChange={this.onchange}
          />
        </form>
        {this.state.name === "" ? (
          <h1>No Data</h1>
        ) : (
          <ul>
            {this.state.movies.map(movie => (
              <li key={movie.imdbID}>
                <img alt="img" src={movie.Poster} />
                <h1>{movie.Title}</h1>
                <p>{movie.Year}</p>
                <button onClick={() => this.viewDetail(movie.imdbID)}>
                  <Link to="./productdetail">View More</Link>
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>
    );
  }
}
export default ProductLists;

Дочерний компонент

import React from "react";

class ProductDetailPage extends React.Component {
  render() {
    return (
      <ul>
        <li>
          <img alt="img" src={this.props.movieId.Poster} />
          <h1>{this.props.movieId.Title}</h1>
          <p>{this.props.movieId.Plot}</p>
        </li>
      </ul>
    );
  }
}

export default ProductDetailPage;