CODEWITHSUNDEEP
reactjsreact-hooksreact-context
William Convertino
William Convertino

Reputation: 77

How to initialize and use context in the same component?

I have a context called SortContext. What I would like to do is initialize this context (create its provider) and then use that context in the same component. Is this possible?

For example:

export default function MyComponent ({children}) {

    const mySortValue = useContext(SortContext)

    return (
        <SortContext.Provider value={'exampleValue'}>
            {children}
        </SortContext.Provider>
    )
}

In this component, the variable mySortContext will not have access to the value 'exampleValue', as this context is not created until after the useContext hook.

Alternatively:

export default function MyComponent ({children}) {

    return (
        <SortContext.Provider value={'exampleValue'}>
            <SortContext.Consumer>
                {context => {
                   const mySortValue = useContext(SortContext)
                   return children
                }}
            </SortContext.Consumer>
        </SortContext.Provider>
    )
}

Something like this doesnt work, as the function cannot use react hooks.

I could obviously just create a new component, put it within the <SortContext.Provider> tags, and access the context there, but is there any way to do it all in one component?

//Sidenote To give some background on why I want this, I use the context to establish some information about how data should be sorted. I would like any components within the context to have access to this data. In the case where I want a simple button, list of data, and sort function in a single component, it seems like overkill to create two components; one to feed it the sort context, the other to host the sort buttons and data.

Upvotes: 1

Views: 1746

Answers (2)

Exifers
Exifers

Reputation: 2822

This is not possible without creating another component.

This is mentioned in the "Pitfall" box in the react js beta docs here (scroll down a bit) : https://beta.reactjs.org/apis/usecontext#passing-data-deeply-into-the-tree

Upvotes: 3

Nicholas Tower
Nicholas Tower

Reputation: 84932

What I would like to do is initialize this context (create its provider) and then use that context in the same component. Is this possible?

In a sense, yes, but you'd do it through local variables, not context.

You're already writing code to generate the value that you'll pass into the provider. In your example, that's just value={'exampleValue'}, but even in a more complicated realworld case, it's entirely under your control what value you pass in. Simply save that value in a local variable, and use it anywhere else you need it.

export default function MyComponent ({children}) {
  // Replace the following with whatever complicated logic you need to generate the value
  const mySortValue = 'exampleValue';

  // Do stuff with mySortValue here 

  return (
    <SortContext.Provider value={mySortValue}>
      {children}
    </SortContext.Provider>
  )
}

Upvotes: 1

Related Questions