Render different value based on props

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.Header closeButton onClick={handleModalClose}>
          <ListGroup variant="flush">
              {`Height: ${height}` || `Title: ${title}`}
            <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>

export default ModalItem;

Can’t see any obvious problems with the code you posted. I’d say that the problem is in different part of the code.

I managed to fix it somehow, but i have another question.
The response from the API includes some data that i don’t need. I need to exclude everything with a key of created, edited, url, etc.
Is there a way to do so in one single filter call or i have to concatenate multiple filters?