Здраствуйте! Изучаю react.js. Стараюсь кроме того что пишу свой код, изучать код других людей который мне попадается в интернете и на форуме. Но не все понятно, поэтому хочу вас спросить как правильно расшифровать некоторые строки кода, то есть не только что указанные строки делают, но и как они расшифровываются. Сам код реализует модальные изображения.
Прошу помочь прокомментировать закомментированные мною строки по аналогии с тем как я прокомментировал строку №1.
class App extends React.Component {
state = {
images: [
'https://pixel.nymag.com/imgs/daily/intelligencer/2018/08/24/24-donald-trump-2.w700.h700.jpg',
'https://bi.im-g.pl/im/15/a2/17/z24782357Q,Donald-Trump--prezydent-USA.jpg',
'https://mobilitynews.pl/wp-content/uploads/2018/05/trump.jpg',
],
openedImage: null,
}
open = e => {
this.setState({
openedImage: e.target.src,
});
}
close = () => {
this.setState({ openedImage: null, }); /* Строка №1: Устанавливаю метод setState обьекту state, а в качестве аргумента метода пишу свойство обьекта state- openedImage с значением null.*/
}
render() {
const { images, openedImage } = this.state;
return (
<div className="portfolio">
<div className="portfolio-container">
{images.map(n => ( // Строка №2
<div className="foto-container">
<img
className="foto-portfolio"
src={n} // Строка №3
onClick={this.open}
/>
</div>
))}
</div>
{openedImage && <div className="modal-portfolio"> // Строка №4
<span className="close" onClick={this.close}>×</span>
<img className="modal-content" src={openedImage} /> // Строка №5
</div>}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));