A babel plugin to replace all `cond && <Jsx />` to `cond ? <Jsx /> : null`

ternary-jsx.js

/**
 * A simple babel plugin that replaces all logical expressions used within JSX to use ternary operator
 * ast explorer: https://astexplorer.net/#/gist/ce3b67aad0896abb10f89e8bf6805819/288e7e77857ae203296e6ee81b1235ff3f4e7b20
 */
module.exports = function (babel) {
    const {types: t} = babel;

    return {
        name: 'ternary-jsx', // not required
        visitor: {
            JSXExpressionContainer(path, parent) {
                if (path.parent.type === 'JSXAttribute') {
                    return;
                }
                const {type, operator, left, right} = path.node.expression;
                let newExpression = null;
                if (type === 'LogicalExpression' && operator === '&&') {
                    newExpression = t.ConditionalExpression(left, right, t.nullLiteral());
                }
                if (type === 'LogicalExpression' && operator === '||') {
                    newExpression = t.LogicalExpression('??', left, right);
                }
                if (newExpression) {
                    path.replaceWith(t.JSXExpressionContainer(newExpression));
                }
            },
        },
    };
};

Created a babel plugin to automatically fix this error in a codebase

steps to use

• download the file
• npm i -D @babel/cli
• update babel config to include local plugin

module.exports = function (api) {
    api.cache(true);

    const presets = [];
    const plugins = ['./ternary-jsx.js'];

    return {
        parserOpts: {
            plugins: ['jsx', 'typescript'],
        },
        retainLines: true,
        presets,
        plugins,
    };
};

• npx babel src -x ".tsx" --out-dir src --keep-file-extension (update extensions as per your project)