This rule allows you to disallow unnecessary curly braces in JSX props and children.

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-brace-presence.md

When { props: "never", children: "never" } is set, the following patterns will be given warnings.

<App>{'Hello world'}</App>;
<App prop={'Hello world'} attr={"foo"} />;

They can be fixed to:

<App>Hello world</App>;
<App prop="Hello world" attr="foo" />;

• If the rule is set to get rid of unnecessary curly braces and the template literal inside a JSX expression has no expression, it will throw a warning and be fixed with quotes. For example:

<App prop={`Hello world`}>{`Hello world`}</App>;

will be warned and fixed to:

<App prop='Hello world'>Hello world</App>;

• If the rule is set to get rid of unnecessary curly braces(JSX expression) and there are characters that need to be escaped in its JSX form, such as quote characters, forbidden JSX text characters, escaped characters and anything that looks like HTML entity names, the code will not be warned because the fix may make the code less readable.

The following patterns will not be given a warning even if 'never' is passed.

<Color text={"\u00a0"} />
<App>{"Hello \u00b7 world"}</App>;
<style type="text/css">{'.main { margin-top: 0; }'}</style>;
/**
 * there's no way to inject a whitespace into jsx without a container so this
 * will always be allowed.
 */
<App>{' '}</App>
<App>{'     '}</App>