Question: JSON Object

```
const users = [{
"name":"Mark",
"age":30,
"isActive" : true,
"cars":{ Owned : ["Ford", "BMW", "Fiat"], Rented : ["Ford", "BMW", "Fiat"]}
},{
"name":"Mistry",
"age":30,
"isActive" : true,
"cars":{ Owned : ["Ford", "BMW", "Fiat"], Rented : ["Ford", "BMW", "Fiat"]}
},{
"name":"John",
"age":30,
"isActive" : false,
"cars":{ Owned : ["Ford", "BMW", "Fiat"], Rented : ["Ford", "BMW", "Fiat"]}
}];

```

My Approach:

Typescript

```
let rentedCars:any[]=[];
let ownedCars:any[]=[];
for (let i = 0; i < users.length; i++) {
  const cars = users[0].cars;
  for (let i = 0; i < cars.Owned.length; i++) {
    ownedCars.push(cars.Owned[i]);
  }
for (let j = 0; j < cars.Rented.length; j++) {
    rentedCars.push(cars.Rented[j]);
  }
}

```

Trying to add all the rented and owned cars list in separate list, The above code works, but is there any more efficient way to accomplish this.

Answer: 
`withStyles` doesn't do the same thing as `makeStyles`. You appear to have just changed the name of the function you're calling, but you're still treating it as though it will make a custom hook. `withStyles` is a higher order component: you give it a component, and it will return a new component wrapped around yours. It then passes the classes in to your component as a prop.

If you want to use `withStyles`, it will need to look like this:

```
import { withStyles } from '@material-ui/styles';

function App({ classes }) {
  return (
     ...
  );
}

export default withStyles((theme) => ({
     ...
)})(App);

```
By the docs - <https://material-ui.com/styles/basics/#higher-order-component-api> - you suppose to use `withStyles` like so -

`export default withStyles(stylesObject)(component);`