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

Reactjs – How to access React (function based) Components functions in Component declaration?

I wondered if its possible to somehow access a React Components function like this on here:

const AssetExample = forwardRef(({...props}, ref) => {
  const {view, setView} = useContext(ViewContext);
  return();
}

export default AssetExample;

so for example i would need to do the following:

<AssetExample setView={(data) => data.hasDefault ? setView('default') : setView('edit')}/>

So i would need to overwrite the Behaviour of an Component Function in the Component declaration.

Tags:

3

Answers


  1. 0

    I belive what you are describing is exactly what useImperativeHandle is made for. Check out the docs here to see if that matches your needs: https://react.dev/reference/react/useImperativeHandle

    Login or Signup to reply.
  2. 0

    There are a couple of issues in your code, first is that why would you have a context inside a component but you’re passing a props that is always set (not null or undefined)?

    Anyways to answer your question, you can just do this:

    const AssetExample = forwardRef(({...props}, ref) => {
  const {view, setView} = useContext(ViewContext);

  const viewFunction = props.setView ? setView;
  return();
}

    This is the important line:

      const viewFunction = props.setView || setView;

    you can also write it as:

      const viewFunction = props.setView ? props.setView  : setView;

    Then you can just use the viewFunc for your function

    Login or Signup to reply.
  3. 0

    To override a component function in its declaration in React, you can use the concept of prop drilling or passing functions as props.

    In your example, you have a component called AssetExample which receives a prop called setView. You can pass a function as the setView prop when you use the AssetExample component.

    For instance, you can do something like this:

    <AssetExample setView={(data) => data.hasDefault ? setView('default') : setView('edit')} />

    In this example, you’re passing an arrow function as the setView prop. This arrow function takes data as an argument and conditionally calls setView(‘default’) or setView(‘edit’) based on the condition data.hasDefault.

    Inside the AssetExample component, you can then use props.setView(data) to call this function and pass the necessary data.

    Remember, for this to work, you need to ensure that setView is a valid function in the scope where you’re using AssetExample. It needs to be defined and accessible in that context.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search