React/Create Element To Jsx

Last update

Dec 18, 2024

This codemod transforms React.createElement calls into JSX syntax, making your code more readable and maintainable.

Example

Before

return React.createElement(
  "div",
  { className: "container" },
  React.createElement("h1", null, "Hello World"),
  React.createElement("p", { style: { color: "blue" } }, "Welcome to React")
);

After

return (
  <div className="container">
    <h1>Hello World</h1>
    <p style={{ color: "blue" }}>Welcome to React</p>
  </div>
);

This codemod transforms React.createElement calls into JSX syntax, making your code more readable and maintainable.

Example

Before

return React.createElement(
  "div",
  { className: "container" },
  React.createElement("h1", null, "Hello World"),
  React.createElement("p", { style: { color: "blue" } }, "Welcome to React")
);

After

return (
  <div className="container">
    <h1>Hello World</h1>
    <p style={{ color: "blue" }}>Welcome to React</p>
  </div>
);

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

Get Started Now