How do I configure Prettier format usable React code?

Question

So I started learning React from this ( https://youtu.be/Dorf8i6lCuk?t=1946 ) tutorial and got stuck trying to save a file. The video recommends getting prettier and I did and then when I save the file it auto-formats code into something that doesn't work. eg:

as per the suggestion a jsx file:

as per suggestion 2: already in Javascript React:

As per the suggestion in the solutions:

Answer 1

Try going to settings > Extensions > uncheck - Enable/disable checkbox. Or Remove all together.

Change code to: (Notice the differences in my code to yours, your div tags are open and return does not have the divs wrapped in () .

function App() {
  return (
    <div>
      Hello!
    </div> //this was giving you the error before 
  )
}

export default App

I'd also double check your version of react that you are running. If the version is different from the Tutorials, this could cause issues.

This might help: Prettier's format on save messes up .jsx files

Answer 2

Following @AlexB801 's advice I have fixed the thing. It turns out you must NOT change the extension to .jsx but only change the formatter. Attaching an image. Also another thing to be noted here is that this was not an issue with Prettier. like so: