React.js: React app not displaying anything

July 5, 2023

I have been trying to run the react app and despite showing no errors in console it is still showing the background image of css and not the form that i created using react with vite as the bundler. the code is as follows:

index.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Adopt Me! v8</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id ="root">not rendered</div>
    <script type="module" src="./App.jsx"></script>


</body>
</html>

app.jsx:

import React from "react";
import {createRoot} from "react-dom/client";
import SearchParams from "./SearchParams";

const App = () => {
  <div>
    <h1>Adopt Me !</h1>
    <SearchParams />

  </div>
};

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);

SearchParams.jsx:

const SearchParams = () => {
    const location = "Seattle, WA";
    return (
      <div className="search-params">
        <form>
          <label htmlFor="location">
            Location
            <input id="location" value={location} placeholder="Location" />
          </label>
          <button>Submit</button>
        </form>
      </div>
    );
  };

export default SearchParams;

The environment that i am using is as follows :

{
    "extends": [
      "eslint:recommended",
      "plugin:import/errors",
      "plugin:react/recommended",
      "plugin:jsx-a11y/recommended",
      "plugin:react-hooks/recommended",
      "prettier"
    ],
    "rules": {
      "react/prop-types": 0,
      "react/react-in-jsx-scope": 0
    },
    "plugins": ["react", "import", "jsx-a11y"],
    "parserOptions": {
      "ecmaVersion": 2022,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "env": {
      "es6": true,
      "browser": true,
      "node": true
    },
    "settings": {
      "react": {
        "version": "detect"
      },
      "import/resolver": {
        "node": {
          "extensions": [".js", ".jsx"]
        }
      }
    }
  }

package.json:

{
  "name": "pet-adoption-app-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "format": "prettier --write \"src/**/*{.js,.jsx}\"",
    "lint": "eslint \"src/**/*{.js,.jsx}\" --quiet",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.1",
    "eslint": "^8.44.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.25.3",
    "prettier": "^2.7.1",
    "vite": "^4.3.9"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

These are the files i have except the CSS files. Despite not showing any error the file is not displaying anything. Please can someone help me and show me what I am not doing correctly here.

>Solution :

Just mofify your app.js as your are not returning any thing update the code as follow-

import React from "react";
import { createRoot } from "react-dom/client";
import SearchParams from "./SearchParams";

const App = () => {
  return (
    <div>
      <h1>Adopt Me!</h1>
      <SearchParams />
    </div>
  );
};

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);