Question: I would like to use a value of a state variable in a JSX expression and cannot figure out the syntax. Here is simplified code:

```
function App() {
  const [isLoading, setIsLoading] = useState(false);
  const [page, setPage] = useState(1);

  return (
    <div>
          {isLoading ? `Loading...` : 'Load Page ' + {page}}
    </div>
  );
}

export default App;

```

If `isLoading` is false, I would like the output to say **Load Page 1**.

As of now it says **Load Page [object Object]** and I am stuck on the syntax.

Thanks.

Answer: 
The following code uses the side-effect-free style frequently found in React/Redux codebases. You could also implement this in a more performant fashion by making in-place changes.

`noFalsyProps` takes an array of entries (from an `Object.entries` call) and eliminates all properties with a falsy (eg. empty string) value.

`correctPropNames` takes an array of entries and ensures instances of the string `'dependence'` are removed.

`transform` uses `Arrray#reduce` to remove all objects with no own properties; for the remainder it transforms the objects using `noFalsyProps` and `correctPropNames`.

```js
const noFalsyProps = (entries) =>
    entries.reduce((acc, [k, v]) => v ? [...acc, [k, v]] : acc, [])

const correctPropNames = (entries) => 
    entries.map(([k, v]) => [k.replace(/dependence/g, ''), v])

const transform = (data) => data.reduce((acc, c) => {
    const transformed = correctPropNames(noFalsyProps(Object.entries(c)))
    return transformed.length 
        ? [...acc, Object.fromEntries(transformed)] 
        : acc 
}, [])

const data = [{ roldependence: "a", 
                rol2dependence: "", 
                rol3dependence: "b" }, 
              { roldependence: "",     
                rol2dependence: "1", 
                rol3dependence: "" }]

console.log(transform(data)) // [{ rol: "a", rol3: "b" }, { rol2: 1 }]
```
The following function should do the job.

```js
data.formGroups.map((formGroup) => {
  Object.keys(formGroup).forEach((key) => {
    if (formGroup[key] !== "") {
      formGroup[key.replace("dependence", "")] = formGroup[key];
    }
    delete formGroup[key];
  });
});

```