React.js responsive site. Using Class based components and context

Nice challenge ! Interesting to see the use of React context with Class components.

I would suggest to use .map() method to render your <Card> component instead of selecting all your item like this :

let work = inputData[0];
let play = inputData[1];
let study = inputData[2];
let exercise = inputData[3];
let social = inputData[4];
let selfCare = inputData[5];

You could do

{ inputData.map((item, index) => <Card key={index} data={item}></Card>}

index could be replace with ID (and it's a better practice) example : key={item.id}

Hope this helps :)