I have job details data in my Context.js which will be the global data for my application. I want to use that data inside my Search.js component and categorize in a certain manner. How can I do that?

Here is my code

Context.js will looks like this.

import React, { Component } from 'react';

export const allJobs = [{
  id : 1,
  company : 'Google',
  position: 'Software Engineer',
  industry: 'Information Technology',
  location: 'Bangalore',
  rating: '4.5',
  label: 'Women Safety'
},
{
  id : 2,
  company : 'Axis',
  position: 'Account Manager',
  industry: 'Banking',
  location: 'Delhi',
  rating: '3.8',
  label: 'Salary & Benefits'
},
{
  id : 3,
  company : 'Cisco',
  position: 'HR Manager',
  industry: 'Information technology',
  location: 'Pune',
  rating: '3.5',
  label: 'Learning opportunities'
},
{
  id : 4,
  company : 'Accenture',
  position: 'Project Manager',
  industry: 'Information technology',
  location: 'Bangalore',
  rating: '4.1',
  label: 'Female Representatives'
},
{
  id : 5,
  company : 'Republic',
  position: 'News Reader',
  industry: 'Media',
  location: 'Delhi',
  rating: '3.2',
  label: 'Maternity Leaves'
},
]
export const Context = React.createContext({
  jobs: allJobs
});

export class Provider extends Component {

   render(){
       return(
           <Context.Provider value={allJobs}>
             {this.props.children}
           </Context.Provider>
       )
   }
}

this will be `Search.js component

import React, { Component } from "react";
import {Context, allJobs} from '../Context';

class Search extends Component {

  constructor(props){
   super(props);
   this.state = {
    jobs: allJobs,
    options: [],
  };
  }

  componentDidMount(){
    let tempArr =[];
    this.state.jobs.forEach(el=>{
      // tempArr = [...tempArr, el.company];
      tempArr = [
        ...tempArr,
        {companies: {value : el.company, label : el.company}}
         {industries: {value : el.industry, label : el.industry}}
      ];
    })
    this.setState({
      options: tempArr
    });

  }

  triggerSwitch = (value) => {
    switch (param) {
      case "companies":
        return (
                <h1>Companies</h1>
               <h5>this.state.options.companies</h5>
        );
      case "industries":
        return (
               <h1>Industries</h1>
               <h5>this.state.options.industries</h5>
        );
      default:
        return console.log("companies");
    }
  };

render(){
  return(
      <Context.Consumer>
         {value => {
              return(
                 {this.triggerSwitch( value)}     
              )}}
        </Context.Consumer>
     )
  }

}
export default Search;

Thanks in advance.