Related questions

How can I ensure an id remains defined after changes to the array?

2021-01-11 05:13 EmeraldTechno imported from Stackoverflow

I'm trying to create an app that can add, edit, and delete "facts" in a table, adapted from an example to-do list program. I use an id number to create a unique key for each td item, and attach it to a variable called todoItem. This is all well and good. Adding and editing items works perfectly well.

However, when I try to delete an item (by splicing out a specific index in my array), todoItem becomes undefined. Something in the deletion function is also deleting the todoItem variable. This means that after deleting an item, I can't add more items and get a TypeError: Cannot read property 'id' of undefined error if I try to add one. There's no reference to todoItem in my deletion function, so I don't understand how it's getting deleted.

const handleDelete = (id) => {
 const deleteList = todos.map((oneTodo) => {
   if (oneTodo.id === id) {
     console.log("id "+id);
     oneTodo = todos.splice(id, 1);
   }
   return oneTodo;
 });
 console.log(deleteList);
 setTodos(deleteList);
 console.log("todo, id:"+todo, id);
 console.log("length: "+todos.length);
};

I am also getting an Warning: Each child in a list should have a unique "key" prop. Check the render method of FactsHandler. error after running the deletion function (and not the add/edit functions). I suspect this is caused by the former problem, as I use the todoItem.id to define a key for each item; if it's missing, a key can't be defined.

The code I'm writing is quite lengthy and a bit messy, so I'm adding the full code as pastebins. I'm thinking it could possibly be something else in my program, but I don't know where or what that would be. Any help would be appreciated. I've poured over this code for several hours this evening and haven't gotten anywhere.

FactsHandler (main function) https://pastebin.com/UzUpNyjK

Item (item component) https://pastebin.com/fncrRfDA

4 answers

  • answered 2021-01-11 05:20 Kalhan.Toress

    try this out

    const handleDelete = (id) => {
    const index = todos.indexOf(todo => todo.id === id);
    if (index !== -1) {
        todos.splice(index, 1);
        setTodos([...todos]);
    }    
};

  • answered 2021-01-11 05:20 Mohammad Faisal

    javascript array.map() doesn't work the way you used it. you are supposed to return a new item for each element of the array

    YOu can use javascript array.filter() method for this purpose

    const deleteList = todos.filter((oneTodo) => oneTodo.id !== id );

  • answered 2021-01-11 05:23 Alex Mckay

    In my opinion you are using the wrong list operator (map) when you should be using filter:

    const list = [
  { id: "apple", label: "Apple" },
  { id: "banana", label: "Banana" }
];
const deleteItem = (itemId) => list.filter(({ id }) => id !== itemId);
deleteItem("apple") // => [{id: 'banana', label: 'Banana'}]

  • answered 2021-01-11 05:42 Parth Mansata

    There are many ways to properly remove the object from the array. A reference of the same can be taken from here. Easiest ways, I found are:

    1. Using conditional for loop,
    2. Using Array.splice()

    Ex.

    let todos = [{
    "id": 1,
    "name": "ABC"
}, {
    "id": 2,
    "name": "DEF"
}, {
    "id": 3,
    "name": "GHI"
},]; 
const id = 1;

// Approach 1
for(let i =0; i < todos.length; i++){
   if(todos[i].id === id){
       todos.splice(i, 1);
       break;
   }
}

// Approach 2
todos = todos.filter((oneTodo) => oneTodo.id !== id );

console.log('Updated todos:', todos);

See also questions close to this topic

  • How to load a script tag on a timer

    The title is self explanatory, i would like to load the below script tag after 3 seconds has passed or on the window.load callback. This is because it takes too long to long this script even with async and defer.

    I have tried document.write but it throws an error stating : Uncaught TypeError: Cannot read property 'insertBefore' of null

    Any help would be appreciated! Thanks.

    <script id="cid0020000272452409358" defer data-cfasync="false"  src="//st.chatango.com/js/gz/emb.js" style="width: 200px;height: 300px;">{"handle":"genoanime","arch":"js","styles":{"a":"333399","b":100,"c":"FFFFFF","d":"FFFFFF","k":"333399","l":"333399","m":"333399","n":"FFFFFF","p":"10","q":"333399","r":100,"pos":"br","cv":1,"cvfnt":"Verdana, Geneva, sans-serif, sans-serif","cvbg":"333399","cvw":150,"cvh":30,"ticker":1}}</script>
  • Why is nodeJs not reading entire binary file from disk?

    I have a PDF file which I want to read into memory using NodeJS. Ideally I'd like to encode it using base64 for transferring it. But somehow the read function does not seem to read the full PDF file, which makes no sense to me.

    The original file test.pdf has 90kB on disk. But if I read and write it back to disk there are just 82kB and the new PDF test-out.pdf is not ok. The pdf viewer says:

    Unable to open document. The pdf document is damaged.

    The base64 encoding therefore also does not work correctly. I tested it using this webservice. Does someone know why and what is happening here? And how to resolve it.

    I found this post already.

    fs = require('fs');
let buf = fs.readFileSync('test.pdf'); // returns raw buffer binary data
// buf = fs.readFileSync('test.pdf', {encoding:'base64'}); // for the base64 encoded data
// ...transfer the base64 data...
fs.writeFileSync('test-out.pdf', buf); // should be pdf again
  • Mark coordinates of 3 different jsons in Mapbox

    I am collecting address information from a database, so I am putting them into a Json and then taking out their coordinates and marking them, there are 3 types of addresses (institutions, students, supervisors) so for each type of address I am using a different marker the problem arises that it only marks the geojson coordinates, but those of geojson2 and geojson3 do not. Any suggestion?

    html:

    <!DOCTYPE html>
<html>

<head>
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;

    }
 
     
  </style>

<script>
var json1=[];
var json2=[];
var json3=[];
</script>

  {% block content %}
  {% if instituciones %}
  {% for direccion in instituciones %}
  <script>
  json1.push(
      "{{direccion.ins_direccion}}, {{direccion.ins_comuna}}, {{direccion.ins_provicincia}}, chile"
      ,)
      console.log("instituciones");
      console.log(json1);
  </script>
  {% endfor %}
  {% endif %}

  {% if profesores %}
  {% for direccion in profesores %}
  <script>
  json2.push(
      "{{direccion.prs_direccion}}, {{direccion.prs_comuna}}, chile"
      ,)
      console.log("profesores");
      console.log(json2);
  </script>
  {% endfor %}
  {% endif %}

  {% if estudiantes %}
  {% for direccion in estudiantes %}
  <script>
  json3.push(
      "{{direccion.est_direccion}}, {{direccion.est_comuna}}, chile"
      ,)
      console.log("estudiantes");
      console.log(json3);
  </script>
  {% endfor %}
  {% endif %}
  {% endblock %}


</head>

<body style="word-wrap:break-word;">
  <div id='map'></div>
  <script src='https://unpkg.com/mapbox@1.0.0-beta9/dist/mapbox-sdk.min.js'></script>

  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg';
    console.log(mapboxgl.accessToken);
    var client = new MapboxClient(mapboxgl.accessToken);
    console.log(client);
   //
   var geojson = {
        'type': 'FeatureCollection',
            'features': [
        ]
      };

    for(var i = 0; i < json1.length; i++) {
      var address= json1[i];
      console.log(address);

    var test = client.geocodeForward(JSON.stringify(address), function(err, data, res) {
      // data is the geocoding result as parsed JSON
      // res is the http response, including: status, headers and entity properties
      console.log(res);
      console.log(res.url);
      console.log(data);
      var coordinates = data.features[0].center;

      geojson.features.push({
            'type': 'Feature',
            'properties': {
            'message': JSON.stringify(address),
            'iconSize': [60, 60]
            },
            'geometry': {
            'type': 'Point',
            'coordinates': [coordinates[0], coordinates[1]]
            }
            },)
      console.log("JSON COORDENADAS 1")
      console.log(JSON.stringify(geojson.features))
      
      console.log(geojson.features.geometry)
      var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: coordinates,
        zoom: 10
      });
     // var longt : coordinates[0].toString();

      // add markers to map
      geojson.features.forEach(function (marker) {
      // create a DOM element for the marker
      var el = document.createElement('div');
      el.className = 'marker';
      el.style.backgroundImage = 'url(https://farm9.staticflickr.com/8604/15769066303_3e4dcce464_n.jpg)'
      el.style.width = marker.properties.iconSize[0] + 'px';
      el.style.height = marker.properties.iconSize[1] + 'px';

      el.addEventListener('click', function () {
      window.alert(marker.properties.message);
      });

      // add marker to map
      new mapboxgl.Marker(el)
      .setLngLat(marker.geometry.coordinates)
      .addTo(map);
      });
    });
  }


  mapboxgl.accessToken = 'pk.eyJ1IjoibGF3aXgxMCIsImEiOiJjamJlOGE1bmcyZ2V5MzNtcmlyaWRzcDZlIn0.ZRQ73zzVxwcADIPvsqB6mg';
  console.log(mapboxgl.accessToken);
  var client = new MapboxClient(mapboxgl.accessToken);
  console.log(client);
 //
 var geojson2 = {
      'type': 'FeatureCollection',
          'features': [
      ]
    };
  for(var i = 0; i < json2.length; i++) {
    var address= json2[i];
    console.log(address);

  var test = client.geocodeForward(JSON.stringify(address), function(err, data, res) {
    // data is the geocoding result as parsed JSON
    // res is the http response, including: status, headers and entity properties
    console.log(res);
    console.log(res.url);
    console.log(data);
    var coordinates = data.features[0].center;

    geojson2.features.push({
          'type': 'Feature',
          'properties': {
          'message': JSON.stringify(address),
          'iconSize': [60, 60]
          },
          'geometry': {
          'type': 'Point',
          'coordinates': [coordinates[0], coordinates[1]]
          }
          },)


    console.log("JSON2 COORDENADAS")
    console.log(JSON.stringify(geojson2.features))
    
    console.log(geojson2.features.geometry)
   // var longt : coordinates[0].toString();

    // add markers to map
    geojson2.features.forEach(function (marker) {
    // create a DOM element for the marker
    var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = 'url(https://farm9.staticflickr.com/8604/15769066303_3e4dcce464_n.jpg)';
    el.style.width = marker.properties.iconSize[0] + 'px';
    el.style.height = marker.properties.iconSize[1] + 'px';

    el.addEventListener('click', function () {
    window.alert(marker.properties.message);
    });

    // add marker to map
    new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);
    });
  });
}


console.log(mapboxgl.accessToken);
var client3 = new MapboxClient(mapboxgl.accessToken);
console.log(client);
//
var geojson3 = {
    'type': 'FeatureCollection',
        'features': [
    ]
  };
for(var i = 0; i < json3.length; i++) {
  var address= json3[i];
  console.log(address);

var test3 = client.geocodeForward(JSON.stringify(address), function(err, data, res) {
  // data is the geocoding result as parsed JSON
  // res is the http response, including: status, headers and entity properties
  console.log(res);
  console.log(res.url);
  console.log(data);
  var coordinates = data.features[0].center;

  geojson3.features.push({
        'type': 'Feature',
        'properties': {
        'message': JSON.stringify(address),
        'iconSize': [60, 60]
        },
        'geometry': {
        'type': 'Point',
        'coordinates': [coordinates[0], coordinates[1]]
        }
        },)
  console.log(JSON.stringify("JSON COORDENADAS"))      
  console.log(JSON.stringify(geojson3.features))
 
  console.log(geojson3.features.geometry)
 // var longt : coordinates[0].toString();

  // add markers to map
  geojson3.features.forEach(function (marker) {
  // create a DOM element for the marker
  var el3 = document.createElement('div');
  el3.className = 'marker';
  el3.style.backgroundImage = 'url(https://farm9.staticflickr.com/8604/15769066303_3e4dcce464_n.jpg)';
  el3.style.width = marker.properties.iconSize[0] + 'px';
  el3.style.height = marker.properties.iconSize[1] + 'px';

  el3.addEventListener('click', function () {
  window.alert(marker.properties.message);
  });

  // add marker to map
  new mapboxgl.Marker(el3)
  .setLngLat(marker.geometry.coordinates)
  .addTo(map);
  });
});
}
 </script>
</body>
</html>
  • Matrix and swapping rows

    My task is to find min and max value in matrix and print that they are in the same row if they are in the same row and swap their rows if they are not equal. My program worked when they are not equal, but it crashed in line where a=[imin1][j] when they were equal, and I don't know why. I hope you could help me.

      #include <stdio.h>

   int main() {
    int m[10][10],i,j,min,max,imin1,imax1,imin2,imax2,a;
    printf("Elements of matrix: ");
    for(i=0;i<10;i++){
        for(j=0;j<10;j++){
            scanf("%d",&m[i][j]);
         }
       }
   min=m[0][0];
   max=m[0][0];
   for(i=0;i<10;i++){
       for(j=0;j<10;j++){
          if(m[i][j]<min){
            min=m[i][j];
            imin1=i;
            imin2=j;
          }
           if(m[i][j]>max){
             max=m[i][j];
             imax1=i;
             imax2=j;
            }
    
         }
       }


    if(imin1==imax1)
    printf("Same row");
    else{
    for(j=0;j<10;j++){
        a=m[imin1][j];
        m[imin1][j]=m[imax1][j];
        m[imax1][j]=a;
       }
    printf("New matrix: \n");
    for(i=0;i<10;i++){
        for(j=0;j<10;j++){
           printf("%d ", m[i][j]);
        }
      printf("\n");
     }
   }


 }
  • PHP recursive loop a "file tree" array cant get all keys

    I have an array like this:

    enter image description here

    In this array I have folders (dir1, dir2, dir3, etc...) and files. I need to list all the directories and files but printing which is the parent of each element, example: dir2 is child of dir1, dir4 is child of dir2, etc...

    The problem is that my recursive function can't iterate over "dir2" because it only obtains "dir3" as directory, directories "dir4", "dir5", "dir7" are missing.

    enter image description here

    Im breaking my head but I don't get it to work...

    This is my code:

        <?php
$files = array();
array_push($files, array('root/dir1/dir2/dir3/file1.mkv', "Archivo de vídeo"));
array_push($files, array('root/test.png', "Archivo de imagen"));
array_push($files, array('root/dir1/dir2/dir4/file2.mkv', "Archivo de vídeo2"));
array_push($files, array('root/dir1/dir2/dir4/dir5/file3.mkv', "Archivo de vídeo3"));
array_push($files, array('root/dir1/dir2/dir4/dir5/dir7/file4.mkv', "Archivo de vídeo4"));

$filearray=[];

function scanpath($patharray, $filesize) {
    $tree=[];
    if(count($patharray)===1) {
        $filename=array_pop($patharray);
        $tree[] = ['nombre'=>$filename, 'descripcion'=>$filesize];
    } else {
        $pathpart = array_pop($patharray);
        $tree[$pathpart] = scanpath($patharray,$filesize);
    }
    return $tree;
}

foreach($files as $fileentry) {
    $patharray = array_reverse(explode('/',$fileentry[0]));
    $thisarray = scanpath($patharray,$fileentry[1]);
    $filearray = array_merge_recursive($filearray,$thisarray);
}

echo '<pre>';
print_r($filearray);
echo '</pre>';


function test($arr, $ultimoDirectorio = "") {

    foreach($arr as $key => $value) {

        if (is_array($value)) {
            // Directory

            if ($key != "" && !is_numeric($key)) {
                $ultimoDirectorio = $key;
            }

            if (!is_numeric(key($value)) && !is_numeric($key)) {
                echo("Directory ".key($value)." inside ".$key."<br>");
            }

            test($value, $ultimoDirectorio);

        } else {
            // File
            $nombreFichero = $arr['nombre'];
            $descripcionFichero = $arr['descripcion'];
            echo("Inside: ".$ultimoDirectorio." => File: ".$nombreFichero." - Description: ".$descripcionFichero."<br>");
            break;
        }

    }
}

echo(test($filearray, ""));

    The function that iterates is called "test".

    Thank's you... this is giving me a serious headache.

  • How to calculate and reassign the current object in the array by adding/subtracting the current index value with the next index value

    Hello so I'm generating a donut chart where it takes in an array of objects for its dataset. Each object has the properties "id", "label", "value", and "color". The piechart library i'm using, nivo, takes the value and generates the appropriate slice size for each data set.

    Right now I'm trying to generate a new dataset where the "value" property represents the start of the slice in degrees. So far for each slice, I was able to calculate the degrees of the circle.

    const pieData = [
{
  id: 'parent conference',
  label: 'Parent Conference',
  value: 60, //degrees of the circle
  color: 'red',
},
{
  id: 'needs-work',
  label: 'Needs Work',
  value: 60,
  color: 'orange',
},
{
  id: 'satisfactory',
  label: 'Satisfactory',
  value: 60,
  color: 'yellow',
},
{
  id: 'good',
  label: 'Good',
  value: 60,
  color: 'green',
},
{
  id: 'ready to help',
  label: 'Ready To Help',
  value: 60,
  color: 'blue',
},
{
  id: 'excellent',
  label: 'Excellent',
  value: 60,
  color: 'purple',
},
];

    I want to be able to output the dataset below, knowing that in this case, the pie starts to generate at the second index, 'Satisfactory'. So the value for 'Satisfactory' would start at '0' and end with '60' degrees because the 'Satisfactory' takes up '60' degrees of the circle. Thus at the '60' degrees mark, it would start the slice for 'Good'. So the value for 'Good' would be '60'. Then it'll add on another '60' degrees because 'Good' takes up '60' degrees of the circle. So then it'll mark the next start for 'Ready to help" at '120' degrees etc. So I'm adding the next index's value on top of the current one and then assigning it to the current index. Except for the the first two index as they're a bit trickier.

    const pieData = [
{
  id: 'parent conference',
  label: 'Parent Conference',
  value: -120, //degree at which slice begins
  color: 'red',
},
{
  id: 'needs-work',
  label: 'Needs Work',
  value: -60,
  color: 'orange',
},
{
  id: 'satisfactory',
  label: 'Satisfactory',
  value: 0,
  color: 'yellow',
},
{
  id: 'good',
  label: 'Good',
  value: 60,
  color: 'green',
},
{
  id: 'ready to help',
  label: 'Ready To Help',
  value: 120,
  color: 'blue',
},
{
  id: 'excellent',
  label: 'Excellent',
  value: 180,
  color: 'purple',
},
];

    The reason why the dataset is like this is because I have a mark indicator where its placement on the donut chart is determined by a degree value. I would need to know at which point of the array the mark indicator lands. For example, if the indicator is '90' degrees, it'll land within the 'Good' range cause it's bigger than '60' degrees and less than '120' degrees. Then I would need to splice off the end starting with 'Ready to Help' and add a new object which would be grayed out cause the user has not reached those ranges yet.

    Any technical guidance/help would help! I'm open to other suggestions.

  • Module not found: Error: Can't resolve '@emotion/styled/base' when running story book

    I recently installed Storybook to my project

    Dependencies and Dev Dependencies below:

    "dependencies": {
    "@emotion/react": "^11.1.4",
    "@emotion/styled": "^11.0.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@hot-loader/react-dom": "^17.0.1",
    "node-sass": "^5.0.0",
    "react": "^17.0.1",
    "react-content-loader": "^6.0.1",
    "react-dom": "^17.0.1",
    "react-hot-loader": "^4.13.0",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@commitlint/cli": "^11.0.0",
    "@commitlint/config-conventional": "^11.0.0",
    "@emotion/babel-plugin": "^11.1.2",
    "@emotion/babel-preset-css-prop": "^11.0.0",
    "@emotion/jest": "^11.1.0",
    "@emotion/styled-base": "^11.0.0",
    "@storybook/addon-actions": "^6.1.15",
    "@storybook/addon-essentials": "^6.1.15",
    "@storybook/addon-links": "^6.1.15",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.1.15",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.2",
    "babel-plugin-emotion": "^11.0.0",
    "babel-plugin-require-context-hook": "^1.0.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "enzyme": "^3.11.0",
    "enzyme-to-json": "^3.6.1",
    "eslint": "^7.18.0",
    "eslint-config-prettier": "^7.1.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.3",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "html-webpack-plugin": "^5.0.0-alpha.3",
    "husky": "^4.3.8",
    "jest": "^26.6.3",
    "jest-prop-type-error": "^1.1.0",
    "prettier": "^2.2.1",
    "react-test-renderer": "^17.0.1",
    "sass": "^1.32.4",
    "sass-loader": "^10.1.1",
    "standard-version": "^9.1.0",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.1.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.15.0",
    "webpack-bundle-analyzer": "^4.3.0",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.2"
  },

    I built a simple button component that uses @emotion/styled for styling. I would like to add a story for this button, however, when running npm run storybook i get the following error

    Module not found: Error: Can't resolve '@emotion/styled/base' in '/directory/to/Button'

    This is what I am importing inside my button component:

    import styled from '@emotion/styled';
import { useTheme } from '@emotion/react';

const StyledButton = styled.button`
  cursor: pointer;
  font-size: ${({ fontSize }) => fontSize};
`;

    This is happening to other components that use @emotion/styled as well. Am i missing an extra dependency or do I need to add any presets to .babelrc file?

    .babelrc:

    {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@emotion/babel-preset-css-prop"
  ],
  "env": {
    "test": {
      "plugins": ["require-context-hook"]
    }
  },
  "plugins": ["react-hot-loader/babel", "@emotion"]
}
  • No code when using my own search command "npm run swizzle @docusaurus/theme-classic SearchBar"

    I am new to Docusaurus and I am trying to use my own search as given in the documentation using "npm run swizzle @docusaurus/theme-classic SearchBar " command. After running the command, I do not see any code in the SearchBar.js file. I saw in an example that after running the command, there were bunch of lines of code which we can modify to add functionality in the project but when I run the command, I get just a single line of code. Can anyone let me know what I am doing wrong ?

    error image

    docusaurus documentation

  • How to fetch a data without using useffect or setTimeout and add loader in react hooks

    DETAIL*

    const Detail = (props) {

    const { getLatest, getAll } = useRoom();
    const [ rowData, setRowData ] = useState([]);
    const [ state, setState ] = useState([]);
    
    useEffect(() => {
        const fetchData = async () => {
            getLatest(PARAMS).then((res) => setState(res['data'].data));
            getAll({length: 9999}).then((res) => setRowData(res['data'].data));
        }
        fetchData();
    }, []);

     return (
{state &&
                state.map((res, i) => (
                    <div key={i} className="w-full px-2 flex rounded justify-center items-center p-2 m-1 bg-white">
                        <Room item={res}  />
                    </div>
                ))}
    )
    }
    
export default Detail;

    What I'm trying to do here is to add a loader also my problem is when I didn't use the setTimeout I'm getting error which is Request failed with status code 500. but when I added the setTimeout there's no error.

    setTimeout(() => {...fetchData }

    How to fetch a data without using the setTimeout?