How to not get [ { "description": null } ] in PostgreSQL using react app in http://localhost:3000

Question

localhost:3000/ > Pern Todo List > type something and click Add got a bug for some reason

I use POST request from react app add button it should be add in whatever I type in, but I got null instead in Postman when using Get request

I am new to React & PostgreSQL so I don't know if I got the code right or not cause When I use Postman the Post, Delete, Get is fine but when I use Client for React App, I got this Bug:

bug "description": null in Postman

[
    {
        "todo_id": 1,
        "description": "I need to go to work"
    },
    {
        "todo_id": 2,
        "description": "Hello meh!"
    },
    {
        "todo_id": 4,
        "description": "I need to go to the zoo"
    },
    {
        "todo_id": 5,
        "description": null
    },

//

For client Folder

npx create-react-app client

Website That I use:

freeCodeCamp.org

PERN Stack Course - Postgres, Express, React, and Node

https://www.youtube.com/watch?v=ldYcgPKEZC8

This is where I got stuck at:

(40:59) Build The Input Todo Component > 49:45min

//

Yes I know how to run server & client & connect to PostgreSQL in terminal

Run server

Cd server
Node server
Nodemon server

Run client

# go to project folder
cd my-react-app-name
# start live server
npm start

Open postgresSQL

psql -U postgres
\c perntodo
SELECT * FROM todos;

Website/Source for Run client:

React tutorial - how do I start the node server for a reactJs application?

//

This is the only error in console:

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

index.js file < src < client < PERN-TODO folder

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));
//Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
//https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis

//Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".
/*
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
*/

//

this is most of my code from Server folder:

for password I just put random and it work just fine in Postman, so I don't think the problem lies there

db.js

const Pool = require("pg").Pool;

const pool = new Pool({
    user: "postgres",
    password: "sadP002",
    host: "localhost",
    port: 5432,
    database: "perntodo"
});

module.exports = pool;

this is my Db in PostgreSQL in terminal

database.sql

CREATE DATABASE perntodo;

CREATE TABLE todo(
    todo_id SERIAL PRIMARY KEY,
    description VARCHAR(255)
);

//

I think the main problem lied in client folder

PERN-TODO folder

client folder

node_modules

public folder

Google bootstrap 4

https://getbootstrap.com/docs/4.0/getting-started/introduction/

index.html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

scr folder

components folder

EditTodos.js

InputTodos.js

import React, { Fragment, useState } from "react";

const InputTodo = () => {
    const [description , setDescription] = useState("");

    const onSubmitform = async e => {
        e.preventDefault();
        try {
            const body = { description };
            const response = await fetch("http://localhost:5100/todos", {
            method: "POST",
            headers: { "Constent-Type": "application/json" },
            body: JSON.stringify(body)
        });

        console.log(response);
        } catch (err) {
            console.error(err.message)
        }
    }

    return (
        <Fragment>
        <h1 className="text-center mt-5">Pern Todo List</h1>
        <form className="d-flex mt-5" onSubmit={onSubmitform}>
            <input
                type="text"
                className="form-control"
                value={description}
                onChange={e => setDescription(e.target.value)}
                />
            <button className="btn btn-success">Add</button>
        </form>
        </Fragment>
    );
};
export default InputTodo;

ListTodos.js

App.css File

App.js File

import React, { Fragment } from 'react';
import './App.css';

//components

import InputTodo from './components/InputTodo';

function App() {
  return (
    <Fragment>
      <div className="container">
        <InputTodo /> 
      </div>
      </Fragment>
  );
}

export default App;

Index.css File

Index.js File

.gitignore file

Package-lock.json file

Package.json file

README.md file

Did you look at this before you posted it? Please give a minimal reproducible example, with correct formatting (e.g. only use snippets for code that can actually run in the browser). — jonrsharpe
– jonrsharpe, Commented Jun 21, 2022 at 11:19
The title (which given its position at the top of the page and in the question list is the first thing I read) is the least of the problems, and you haven't posted an answer to judge. — jonrsharpe
– jonrsharpe, Commented Jun 21, 2022 at 11:33
I'm not sure why you think I haven't read the title, or why that would excuse the rest of what you've posted. — jonrsharpe
– jonrsharpe, Commented Jun 21, 2022 at 11:54
@jonsharpe that cause the first thing you do is complaint about something that are trivial, instead of helping/answer the question or ask what type of question am I asking? — NetLordOfData
– NetLordOfData, Commented Jun 21, 2022 at 12:04
It's up to you to clearly communicate what type of question you're asking, see How to Ask for guidance. A MRE is a basic requirement, and I don't agree that your whole post being formatted as if at random is "trivial". But it appears I've given you feedback on this before and you've changed nothing at all, so I won't waste any more of my time here. — jonrsharpe
– jonrsharpe, Commented Jun 21, 2022 at 12:21

Wayne Celestin · Accepted Answer · 2022-06-21 11:35:13Z

-1

Try removing the object where the description is null and enter a new value and try again

answered Jun 21, 2022 at 11:35

Wayne Celestin

1591 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

NetLordOfData Over a year ago

@Wayne_Celestin are you talking about the database.sql file in server folder? or are you talking about client folder? if it client folder please tell me which file it is?

Wayne Celestin Over a year ago

in the server folder

Collectives™ on Stack Overflow

How to not get [ { "description": null } ] in PostgreSQL using react app in http://localhost:3000

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related