Code must be placed on a new line react jsx one expression per line

In React JSX, it's a good practice to write one expression per line, and to indent each line with a consistent number of spaces or tabs. This makes the code easier to read and maintain.

Here are some guidelines for formatting your React JSX code:

1. One expression per line: Each JSX element should be written on a new line, and each line should contain only one expression.
2. Indentation: Use a consistent number of spaces or tabs to indent each line. A common convention is to use 2 or 4 spaces for indentation.
3. No line wrapping: Avoid wrapping long lines of code by breaking them up into multiple lines. Instead, use line breaks to separate logical sections of code.
4. Consistent spacing: Use consistent spacing between elements, such as between opening and closing tags, and between attributes.

Here's an example of well-formatted React JSX code:

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Hello World!</h1>
      <p>This is a paragraph of text.</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  );
}

And here's an example of poorly formatted React JSX code:

import React from 'react';
function MyComponent(){
  return<div><h1>Hello World!</h1><p>This is a paragraph of text.</p><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></div>
}

As you can see, the poorly formatted code is harder to read and understand, while the well-formatted code is easier to read and maintain.