Question 73500 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Component accepts Component as an argument-React – Reactjs

The scenario is like I want to create a component which can accept component as an argument or props.
So created one functional component named as scenarioComponent.js with props

function ScenarioComponent(props) {
  return <div> <h1>{props.Title}</h1> 
         <div className='row'>
         {props.HTMLCode}//this will be the another component HTML tag
         </div>
         <div className='row'>
         {props.REACTCode}//this will be the another component REACT code
         </div>
         </div>;
}

Once this component is ready we can call this to pass the necessary props:
below code in SampleComponet.js where i want to use scenario component.

function SampleComponet(props) {
import ScenarioComponent from './components/ScenarioComponent';

return ( <div>
<ScenarioComponent Title="My New component" HTMLCode={<div>My Heading<div>} REACTCode={import ScenarioComponent from '.components/ScenarioComponent';}>
</div>
);
}

I have tried above line of code and referred the text .
Able to achieve partially but want to make it more flexible like we should pass complex component.So any help will appreciated.

Tags:

4

Answers


  1. 0

    As I commented before,

    // e.g) in your src/components/ComponentA.jsx
export default function ComponentA() {
  return <div>hello</div>;
}

// e.g) in your src/components/ScenarioComponent.jsx
export default function ScenarioComponent(props) {
  return (
      <div>
        <h1>{props.Title}</h1> 
        <div className='row'>
         {props.HTMLCode}//this will be the another component HTML tag
        </div>
        <div className='row'>
         {props.REACTCode}//this will be the another component REACT code
        </div>
      </div>);
}

// in your src/app.jsx or src/pages/app.jsx

import ComponentA from 'src/components/ComponentA'

function App() {
  return <ScenarioComponent 
           title="this is title"
           HTMLCode={<div>hello</div>} // send HTMLElement
           REACTCode={<ComponentA />} // send JSX
         />
}
    Login or Signup to reply.
  2. 0

    You are almost there. The problem is you can’t put an import inside a prop. Instead, just do the import at the top of your file:

    import ScenarioComponent from '.components/ScenarioComponent';

    Then pass the component as a prop:

    ... REACTCode={<ScenarioComponent/>} ...
    Login or Signup to reply.
  3. 0

    On top of @Jyoung answer, if you still want to pass the elements as props, you can do like the below.

    function ComponentA () {
  return <div>hello</div>;
}

function ScenarioComponent(props) {
  return (
      <div>
        <h1>{props.Title}</h1> 
        <div className='row'>
         <props.HTMLCode />//this will be the another component HTML tag
        </div>
        <div className='row'>
         <props.REACTCode />//this will be the another component REACT code
        </div>
      </div>);
}

function App() {
  return <ScenarioComponent 
           title="this is title"
           HTMLCode={HTMLComponent} // send Component
           REACTCode={ComponentA} // send Component
         />
}
    Login or Signup to reply.
  4. 0

    Another one :
    Instead of passing components as props you wrap them with your ScenarioComponent component so you recieve them as props.children:

    <ScenarioComponent>
  <ComponentA key="c1" />
  <div key="c2">
    <table>
    /....
    </table>
  </div>
</ScenarioComponent>

    const ScenarioComponent = ({ children }) => {
  return (
    <>
      <div className="row">{children.find((ch) => ch.key === "c1")}</div>
      <div className="row">{children.find((ch) => ch.key === "c2")}</div>
    </>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search