Подскажите, как передавать props в потомка после метода map ? Вот простой пример
const booksDescription = [
{
id: 1,
bookName: "Понедельник начинается в субботу",
bookInSection: 1,
authorNumber: 1
},
{
id: 2,
bookName: "Гарри Поттер и Орден Феникса",
bookInSection: 6,
authorNumber: 3
},
{
id: 3,
bookName: "Сказание о трех свинах",
bookInSection: 1,
authorNumber: 4
}
];
const booksAuthor = [
{
id: 1,
authorName: "Борис",
authorSurname: "Стругацкий"
},
{
id: 2,
authorName: "Аркадий",
authorSurname: "Стругацкий"
},
{
id: 3,
authorName: "Джоан",
authorSurname: "Роулинг"
},
{
id: 4,
authorName: "Джон",
authorSurname: "Толкиен"
}
];
function WorkSpace(props) {
let Books = booksDescription.map((el) => (
<BookItem
id={el.id}
key={el.id}
bookName={el.bookName}
authorNumber={el.authorNumber}
/>
));
return (
<main className={"main"}>
<div id="FullListBook" className="BooksAll ">
{Books}
</div>
</main>
);
}
class BookItem extends React.Component {
render() {
const book = this.props;
const authorsOfBookNumber = book.authorNumber - 1;
const authorOfBookName = booksAuthor[authorsOfBookNumber].authorName;
const authorOfBookSurname = booksAuthor[authorsOfBookNumber].authorSurname;
const authorsOfBookFull = authorOfBookSurname + " " + authorOfBookName;
return (
<div className="bl_book__item">
<a className="bl_book__link" href="#">
<BookImg/>
<p className="bl_book__name">
<p className="bl_book__title">{book.bookName}</p>
<p className="bl_book__author">{authorsOfBookFull}</p>
</p>
</a>
</div>
);
}
}
function BookImg(){
return (
<div class="book_picture">
<span>Книга по счету №</span>
<img src="image.png" alt="Author + Book name"/>
</div>
)
}
function App() {
return <WorkSpace />;
}
ReactDOM.render(<App />, document.getElementById("root"));
.bl_book__item {
display: inline-block;
width: 150px;
height: 200px;
max-resolution: 40px;
vertical-align: top;
margin-right: 10px;
border: 1px solid #000;
}
article {
padding: 10px;
border: 1px solid #f00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Вопрос - как в компонент BookImg передать значения bookInSection (для Книга по счету №) и значение alt которое по идеии должно состоять из текущего значения названия книги и её автора ?