onClick is not firing-CodePudding

I'm teaching myself CRUD in MERN stack and I've come across a bug. The onClick inside GET function is not firing, it only fires after multiple times of clicking. Here's the code:

function GetData() {
    try{
      useEffect(()=>{
        axios.get('http://localhost:3000/app/profile', {
        })
        .then((response)=>{
          const userdata = response.data;
          setUser(userdata)
          console.log(userdata)
        })
      },[])
      if (User.length > 0){
        try{
           return User.map((user) => {
            return(
              <div style={{ display:'flex', marginTop:'1em'}}>
                <div style={{ marginLeft:'15em', width:'500px'}}>
                  <h style={h2}>{user.name}</h>
                </div>
                <div style={{ width:'350px' }}>
                  <h style={h2}>{user.email}</h>
                </div>
                <div>
                  <button onClick={()=>{alert('update');}}>UPDATE</button>
                  <button onClick={()=>{alert('delete');}}>DELETE</button>
                </div>
              </div>
            );
          })
        } catch(e){
          console.log(e)
        }
      }
    } catch(e){
      console.log(e)
    }
  }

I spent a whole day looking for a solution but the problem is still there. Here' my package.json:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.1.3",
    "bootstrap": "^5.2.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-react": "^7.18.6"
  }
}

Also just for testing, when I place the buttons outside on the GET function they work fine. But they won't work inside GET where I need them to be placed.

CodePudding user response：

Your are trying to return webpage JSX two times, it get the function stuck in loophole. It is ideal to have only single return in a function. Try to remove the single return. Hope it may help!!

CodePudding user response：

There are lots of refactors needed in your code.

I have refactored this here https://codesandbox.io/s/compassionate-yalow-glp5dq?file=/src/App.js

import "./styles.css";
import axios from "axios";
import { useEffect, useState } from "react";

export default function App() {
  const [User, setUser] = useState();

  function GetData() {
    axios
      .get("https://jsonplaceholder.typicode.com/todos", {})
      .then((response) => {
        const userdata = response.data;
        setUser(userdata);
        console.log(userdata);
      });
  }

  useEffect(() => {
    GetData();
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {User &&
        User.map((user) => {
          return (
            <div style={{ display: "flex", marginTop: "1em" }} key={user.id}>
              <div style={{ marginLeft: "15em", width: "500px" }}>
                <h5>{user.id}</h5>
              </div>
              <div style={{ width: "550px" }}>
                <h5>{user.title}</h5>
              </div>
              <div>
                <button
                  onClick={() => {
                    alert("update");
                  }}
                >
                  UPDATE
                </button>
                <button
                  onClick={() => {
                    alert("delete");
                  }}
                >
                  DELETE
                </button>
              </div>
            </div>
          );
        })}
    </div>
  );
}