'ImgOverlay' is defined but never used "React-Bootstrap"

Question

Hey guys I've tried using react-bootstrap and try destructuring. { Card,ImgOverlay,Title,Text } But only 'Card' got used. and give me an error:

'Line 2:15: 'ImgOverlay' is defined but never used no-unused-vars Line 2:26: 'Title' is defined but never used no-unused-vars Line 2:32: 'Text' is defined but never used no-unused-vars'

import React, { Component } from 'react'
import { Card,ImgOverlay,Title,Text } from 'react-bootstrap';

import 'bootstrap/dist/css/bootstrap.min.css';




export default class ComponentOne extends Component {
    render() {
        return (
           
                <Card className="bg-dark text-white">
                <Card.Img src="holder.js/100px270" alt="Card image" />
                <Card.ImgOverlay>
                <Card.Title>Card title</Card.Title>
                <Card.Text>
                    This is a wider card with supporting text below as a natural lead-in to
                    additional content. This content is a little bit longer.
                </Card.Text>
                <Card.Text>Last updated 3 mins ago</Card.Text>
                </Card.ImgOverlay>
                </Card>
                
           
        )
    }
}

Answer 1

Because you're using properties of Card viz. Card.Img, Card.ImgOverlay and not ImgOverlay, Title, Text separately.

Your import should look like this instead,

import { Card } from 'react-bootstrap';

No need of importing, ImgOverlay, Title, Text from react-bootstrap as they are already present as a sub-property of Card component.