Я пытаюсь сделать запрос 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;