Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to import two component but same name from two libraries?

I need Tooltip component from two libraries. For example

import { Tooltip } from "react-leaflet";
import { Tooltip } from "recharts";

But the same name of Tooltip of two libraries, I get an error. How to import Tooltip without error.

like image 924
azmul hossain Avatar asked Apr 28 '18 08:04

azmul hossain


People also ask

How do you import two components with the same name?

To import two classes with the same name, use the as keyword to rename one or both of the imports, e.g. import { Employee as Employee2 } from './another-file-2'; . The as keyword allows us to change the identifying name of the import. Here is an example of an index.

How can you embed two or more components into one?

We can divide the UI of the application into small components and render every component individually on the web page. React allows us to render one component inside another component. It means, we can create the parent-child relationship between the 2 or more components.

Can we declare multiple components in a single file?

Answer. Yes, you can declare multiple components within a single file.

How do you render two components?

Even if we have multiple elements to render, there can only be a single root element. This means if we want to render two or more elements, we have to wrap them in another element or component. Commonly, the element used for this is a <div> tag.


1 Answers

import { Tooltip as ReactLeafletTooltip} from "react-leaflet";
import { Tooltip as RechartsTooltip} from "recharts";

then use it in render as

<RechartsTooltip/>
<ReactLeafletTooltip/>
like image 176
Gautam Naik Avatar answered Nov 15 '22 23:11

Gautam Naik