How to use JSX in a JSON object

Question

I am trying to use JSX in a JSON object but I get this error message
'React' must be in scope when using JSX react/react-in-jsx-scope

import {Translate} from 'react-localize-redux';
import Translations from '../translations/dashboard';

export default {
  items: [
    {
      name: <Translate id="movie.title" />,
      url: '/dashboard',
      icon: 'icon-speedometer',
    },
  ]
}

Please, can someone help me out?

Does this answer your question? ['React' must be in scope when using JSX react/react-in-jsx-scope?](https://stackoverflow.com/questions/42640636/react-must-be-in-scope-when-using-jsx-react-react-in-jsx-scope) — Henry Woody, Oct 24 '22 at 21:20

score 4 · Answer 1 · answered Sep 30 '19 at 12:02

4

Add import React from 'react'; at the beginning of the file and make sure filename extension is .jsx or .tsx;

answered Sep 30 '19 at 12:02

zilijonas

3,285
3
26
49

score 1 · Answer 2 · answered Oct 01 '19 at 11:20

You need to import React into your file.
Add import React from 'react'; at the top
Your file should look like this:

import React from 'react';
import {Translate} from 'react-localize-redux';
import Translations from '../translations/dashboard';

export default {
  items: [
    {
      name: <Translate id="movie.title" />,
      url: '/dashboard',
      icon: 'icon-speedometer',
    },
  ]
}

Note: You may decide to change the extension of the file to .jsx or .tsx as suggested by @LiJonas

How to use JSX in a JSON object

2 Answers2