I have a doubt on the usage of react.Context

1. I got a provider that fetches set of names

2. I got a consumer a show below

Now i used the consumer component and imported to the component I want to use and wrapped the entire component

But how can i fetch the names and from the consumer and show it in the component where i wanna show and make the names searchable.

If can pass the names as a prop and render the names in the component, I can see it the webpage where i can search the name and it fetches the data from an array.

But when i use the names in this.props and check in the console, it shows undefined and since i cant get an array of names , i cant render them.

Could anyone please guide ?

import React from 'react';
import Context from './Context'; 

export default function(Component) {
    return class extends React.PureComponent{
        render(){
            return(
                <Context.Consumer 
                    children={names=>(
                        <Component {...this.props} names={names} />
                    )}
                />
            )
        }
    }
}