'React using States from different paths
I want to take movie title when I click add to favorite button in movieItem.js and want to add my state in Favorites.js
import React, { Component } from 'react';
import { store } from '../..';
import './MovieItem.css';
class MovieItem extends Component {
render() {
const { Title, Year, Poster } = this.props;
console.log(this.props.Poster);
return (
<article className="movie-item">
<img className="movie-item__poster" src={Poster} alt={Title} />
<div className="movie-item__info">
<h3 className="movie-item__title">{Title} ({Year})</h3>
<button onClick={()=>console.log(Title)} type="button" className="movie-item__add-button">Добавить в список</button>
</div>
</article>
);
}
}
export default MovieItem;
That is my favoriteMovie.js
import React, { Component } from 'react';
import './Favorites.css';
class Favorites extends Component {
state = {
title: '',
movies: [
{ imdbID: 'tt0068646', title: 'The Godfather', year: 1972 }
]
}
render() {
return (
<div className="favorites">
<input value="Новый список" className="favorites__name" />
<ul className="favorites__list">
{this.state.movies.map((item) => {
return <li key={item.id}>{item.title} ({item.year})</li>;
})}
</ul>
<button type="button" className="favorites__save">Сохранить список</button>
</div>
);
}
}
export default Favorites;
Simply I want to take Title from Movie.js and add it to state which placed in favoriteMovie.js
Solution 1:[1]
Try to use context or redux to store your list of favourites movies and save there some important info like ID title etc etc and then on map check if some id is included in your list of favourites and if it is add some start there
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Abdulrahim Klis |
