Why my RadioButton does not work and I got Unterminated JSX contents?

I saw that tutorial : radiobutton

So I decided to check it it works using the following code with React and Tailwind :

import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";
import Navbar from "./components/Navbar";
import LivePortal from "./components/LivePortal";
import WorkContainer from "./components/WorkContainer";
import HomePage from "./components/Homepage";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

const App = () => {
  return (
    <input className="sr-only peer" type="radio" value="yes" name="answer" id="answer_yes">

                                  className="flex p-5 bg-white border border-gray-300 rounded-lg cursor-pointer focus:outline-none hover:bg-gray-50 peer-checked:ring-green-500 peer-checked:ring-2 peer-checked:border-transparent"

                              <div className="absolute hidden w-5 h-5 peer-checked:block top-5 right-3">


export default App;

But I go the following error : /src/App.js: Unterminated JSX contents (23:7)

You can see the full project here : My project

Could you help me please ? I don’t understand why it does not work … Thank you very much !

>Solution :

You need to put the self closing tag on the input tag. Right now its just a > but should be />

Leave a Reply