Hi! I’m building a little star wars app in React.
I have a CardsList component that receives a title and an array as props. The array can be an array of characters, films, planets , etc.
The CardsList components returns a Card Deck with some CardItems in it. Each card item when clicked shows a modal with some info.
For example it shows, name and birth year for a character; title and director for a film, and so on.
What is the best way to tackle this? I’ve come up with this code, but it’s not working as expected, and i think that overall isn’t the right way to achieve it.
import React from 'react';
import Modal from 'react-bootstrap/Modal';
import ListGroup from 'react-bootstrap/ListGroup';
const ModalItem = ({show, handleModalClose, item}) => {
const {name, height, mass, birth_year, gender, homeworld, films, species, vehicles, starships} = item;
const {title, episode_id, opening_crawl, director, release_date} = item;
return (
<Modal
show={show}
dialogClassName="modal-100w"
>
<Modal.Header closeButton onClick={handleModalClose}>
<Modal.Title>{name}</Modal.Title>
</Modal.Header>
<Modal.Body>
<ListGroup variant="flush">
<ListGroup.Item>
{`Height: ${height}` || `Title: ${title}`}
</ListGroup.Item>
<ListGroup.Item>Mass: {mass}</ListGroup.Item>
<ListGroup.Item>Birth Year: {birth_year}</ListGroup.Item>
<ListGroup.Item>Gender: {gender}</ListGroup.Item>
<ListGroup.Item>Homeworld: {homeworld}</ListGroup.Item>
</ListGroup>
</Modal.Body>
</Modal>
)
}
export default ModalItem;