How to use a HTML portion of a react.js file to another react.js file

Question

I am trying to use the content of a separate react.js file to another react.js file. The js file contains a drop down & the drop down i want to show on the basis of a condition. Below is the js file which contains the drop down

const MyDataTableHeader = ({

first =0,
pageSize=0,
totalElements=0,
exportFile,
})

 ....

return(
<div className="someCss">
<Dropdown style={{width:100%, textAlign : "center"}}
value={selectedFileFormat}
options = {downloadOptions}
placeholder="Export As"
id={DOWNLOAD_OPTION}
name={DOWNLOAD_OPTION}
onChange={(e) => {
setSelectedFileFormat(e.value);  
}}
/>
</div>
<div  style={{padding:"1em"}} className = "someCss1">
<Button type="button" icon = "pi pi-download" iconPos="left" onClick={exportHandler}
/>

This portion of the code displays a Drop Down and a option to export, i want to use this code block within another js file , below is the content of the js file

const MySearchPanel = ({onSearch,onClear,exportFile }) => 
const searchHandler = () => {
  if(//some Condition){
   // i want to show  the Drop down with export option here

ZobairQ · Accepted Answer · 2020-11-24T18:11:23.370

You want to export your dropdown as a component and then inside your other file inside your condition you just render it using JSX.

   import Dropdown from "../from/another/file" // const DropDown = require('from another file') if you do not wish to use module syntax.
   const MySearchPanel = ({onSearch,onClear,exportFile }) => 
   const searchHandler = () => {
   // ...
   return (
   //if the codition is true show dropdown otherwise show nothing
    <div>
   {Condition ? <Dropdown /> : null } 
    </div>
  );
  // ...

I hope this answers your question.

How to use a HTML portion of a react.js file to another react.js file

1 Answers1