i can't add html tag in ReactDOM render file in vscode-CodePudding

import React from 'react';
import ReactDOM from 'react-dom';

const data = < h1 > hello world! < /h1>
ReactDOM.render(data,
    document.getElementById('root')
);

Today I wanted to work on reactjs but I had a problem that when I save that code in vs code after the code changes, it puts extra spaces between them in the html tag which causes a bug. I wanted to know if any of you had this problem and could have a problem Thank you for helping me solve it

CodePudding user response：

You can only render a react component inside ReactDOM.render,

import React from "react";
import ReactDOM from "react-dom";

// React can't treat line below as component
// const data = < h1 > hello world! < /h1>

// Try code line below as react will treat this as a Component
const Data = () => <h1> hello world! </h1>;

ReactDOM.render(
  //instead of passing function directly as the argument

  //data,

  // Pass it as a component
  <Data />,
  document.getElementById("root")
);

CodePudding user response：

Your code is fine. The render method does not require a component. A element like you have will work too.

This is a common problem in VS Code Studio typically due to editor settings or extensions.

See a few answers for potential solutions: