Rendering function/Component without a call from render function

Question

I have created a component, and I want to make it easy to use. I don't wanna call my component like the following way,

<myComponent {...someProps} />

I'm looking for a specific way, I'm still new in React I don't know exactly the name and how can I do it. is there any way to call my component as a hook or something similar, let's take this component as an example?

export const useComponent = (props) => {  
  const [show, setShow] = useState('show');
  
  const onShow = (value) => { setShow(value); }

  return (
    // Content
    <div className={show}>
      Component 
      <button onClick={onShow(hide)}>Hide</button>
    </div>
  );
}

I need to show what inside content using a function, like that

const onShow = useComponent();

//if I want to show it I will call onShow function
<button onClick={onShow('show')}>Show Component</button>

What I want basically is when I clicked on the 'Show Component' button I want to show the useComponent, without calling it inside HTML like . it's like it gonna be easy for to everyone use my component.

Sounds like what you're looking for is how to conditionally render a component. — Bob
– Bob, Commented Sep 13, 2021 at 14:26
No. For multiple reasons. 1 - You should never call a component function yourself. This leaves React out of the process entirely, and it can no longer manage state or lifecycle (your hooks will throw errors). 2 - onClick doesn't return anything. Conceptually it makes no sense for it to return anything. If it did, where would it render the JSX? Inside the button? Above it? Below? — Brian Thompson
– Brian Thompson, Commented Sep 13, 2021 at 14:26
move your show and setShow to the component that has the button. on click of the button set the show and conditionally render the Component based on the state show — Prasanna
– Prasanna, Commented Sep 13, 2021 at 14:36
I'm looking for a way to show it using a function inside Component. @Prasanna — Nouh Belahcen
– Nouh Belahcen, Commented Sep 13, 2021 at 14:39

Andrea · Accepted Answer · 2021-09-16 17:40:13Z

1

One solution is to use a wrapper component using the Context API. This is, in my opinion, one of the advanced features of React. Super useful of course, but if you are a beginner, try creating just a component :) Anyway, you missed in your description, what the custom hook should do. If you need a more precise answer, try giving some more info :)

import React, { useState, createContext, useContext} from 'react';

export const ComponentContext = createContext(null);

/**
 * Don't forget to describe your provider
 * @param {object} args react args
 * @param {JSX.Element | Array<JSX.Element>} args.children children to show
 */
export const ComponentProvider = ({ children }) => {


  const [show, setShow] = useState('show');
  
  const onShow = (value) => { setShow(value); }

  return (
    <ComponentContext.Provider
      value={{ show, onShow }}
      children={children}
    />
  );
};

/**
 * Hook used to get the props you defined
 * @returns {{show:boolean,onShow:function}}
 */
export const useComponent = () => {
  const res = useContext(UserContext);
  return res;
};

You can then use your component in the wrapper or App.jsx

import React from 'react';
import { ComponentProvider } from './custom-hooks/ComponentProvider';
function App() {
  return (
    <ComponentProvider>
      <YourComponent />
    </ComponentProvider >
  );
}

and finally, use the functions you need in the element

import { useComponent } from './custom-hooks/ComponentProvider';

...

const { onShow } = useComponent();

return (
   <button onClick={()=>onShow('show')}>Show Component</button>
);

answered Sep 16, 2021 at 17:40

Andrea

1,3269 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nouh Belahcen Over a year ago

is everything correct? codesandbox.io/s/react-hook-useimperativehandle-forked-g8t74

Andrea Over a year ago

Not even close. You missed the part of the wrapper or App.jsx. :D You have to define the Context of the component in order to use "useComponent"

Nouh Belahcen Over a year ago

is there any way to avoid defining anything inside the HTML part,

Andrea Over a year ago

On click has to be defined in the html. For more complex stuff, you could use useRef, but again, this is advanced react. Make sure to understand the simple things first :)

Thirumani guhan · Accepted Answer · 2021-09-22 18:30:56Z

1

Edited:

I think you're looking for HOC. You can create Higher Order Component using useComponent and serve/provide wherever you need it by following example.

const withComponent = (WrappedComponent) => {
  const WithComponent = (props) => {
    function useComponent(status, setStatus) {
      return (
        <div>
          {status == "show" && <div>
            <p>Inner Contents</p>
            <button onClick={() => setStatus("hide")}>Hide Inner Contents</button>
          </div>}
          
        </div>
      );
    }
    return <WrappedComponent {...props} useCompoent={useComponent} />;
  };

  return WithComponent;
};

const App = (props) => {
  const { useCompoent } = props;

  const [status, setStatus] = useState("hide");

  const getUseComponent = useCompoent(status, setStatus);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {getUseComponent}
      <button onClick={() => setStatus("show")}>
        Show Component
      </button>
    </div>
  );
};

export default withComponent(App);

You can move withComponent into separate file as well.

edited Sep 22, 2021 at 18:30

answered Sep 22, 2021 at 15:27

Thirumani guhan

3981 gold badge4 silver badges22 bronze badges

6 Comments

Nouh Belahcen Over a year ago

it's not clear how can I use HOC in my case

Thirumani guhan Over a year ago

You can add button instead of P tag inside the useComponent function and trigger to hide/show function to display html (for ex. modal).

Thirumani guhan Over a year ago

You can't return html & events when you call as a function. it will not render any html. So you need HOC to call as a function(in your desired way - without rendering the component as <myComponent/>).

Thirumani guhan Over a year ago

I made a sandbox to show/hide inner function based on click codesandbox.io/s/react-managing-function-modal-externally-zpqyv Hope it will be useful

Nouh Belahcen Over a year ago

in your solution I need to call getUseComponent inside HTML.

|

Collectives™ on Stack Overflow

Rendering function/Component without a call from render function

2 Answers 2

4 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related