In a react component, getting data from Context API and categorize according certain condition in the component state
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.