How can I add a Custom component in a Data object?

user_10184382 0
Viewed 50

I would like sectionOne to be able to call another component but I dont seem to be getting it right. Basically below is an example of what I am trying to do. Any help would be nice. thx

const element = (
  <div label="go Back">
      <Home />
  </div>
);
export const appTabBarQueues = {
  sectionOne: {element},
  sectionTwo: 'Section Two',
  sectionThree: 'Section Three',
  sectionFour: 'Section Four',
  sectionFive: 'Section Five'
};

//drawer.js

import React from 'react';
import PropTypes from 'prop-types';

export const DrawerSection = props => {
    const {sectionOne} = props;
    return (
        <>
            <div>{sectionOne}</div>
        </>
    );
};
DrawerSection.propTypes = {
    sectionOne: PropTypes.any,
};
react-router rxjs react-hooks reactjs javascript
1 Answers
Import React from 'react';


const Element = (
      <div label="go Back">
          <Home />
      </div>
    );

    export const appTabBarQueues = {
      sectionOne: <Element />,  // Capitals is important else it will be seen as html element
      sectionTwo: 'Section Two',
      sectionThree: 'Section Three',
      sectionFour: 'Section Four',
      sectionFive: 'Section Five'
    };

  or

 export const appTabBarQueues = {
      sectionOne: React.cloneElement(Element, {someProps: 'something'});
  }

  or if its not imported from elsewhere then,

  export const appTabBarQueues = {
          sectionOne: function Element(props){
            return <div label="go Back">
                      <Home />
                   </div>
          },
  }

With some idea based on your error message, I made some changes and could see that it works. Check below code sandbox

https://codesandbox.io/s/zen-field-1srdo

user_83703700
Related