'Uncaught TypeError: can't access property "Table1", tables[0] is undefined

and I got an error with which I have been having headaches for a long time, the error is that I have a JSON object, it has two arrays of tables in which there are objects, and when I try to extract its object from the first table through the map , then I get an error like: Uncaught TypeError: can't access property "Table1", tables[0] is undefined

Here is the code for connecting to the table:

   const [tables,setTables] = React.useState([])

  React.useEffect(() => {
      try{
        fetch('http://178.21.11.175/table-2017-01-01_1.json')
        .then(response => response.json())
        .then((result) => {
          console.log(result)
          setTables([
            ...tables,
            {
              Table1: result.Table1,
              Table2: result.Table2,
            }
          ])
        })
      }
      catch(err){
        console.warn(err);
      }


  },[])

The code where I pull data from the table in which I get the treasured error

 {tables[0].Table1.map((item,idx) => {
        return(
        <>
          <tr key={idx.number}>
            <td className="tg-btxf">{item.number}</td>
            <td className="tg-btxf">{item.name}</td>
            <td className="tg-5fiw">{item.daytempeture}</td>
            <td className="tg-5fiw">{item.dayhotwater}</td>
            <td className="tg-5fiw">{item.daysteam}</td>
            <td className="tg-5fiw">{item.daysum}</td>
            <td className="tg-5fiw">{item.lastyeardaytemperature}</td>
            <td className="tg-5fiw">{item.lastyeardayhotwater}</td>
            <td className="tg-5fiw">{item.lastyeardaysteam}</td>
            <td className="tg-5fiw">{item.lastyeardaysum}</td>
            <td className="tg-5fiw">{item.percent59}</td>
            <td className="tg-5fiw">{item.monthtemperature}</td>
            <td className="tg-5fiw">{item.monthhotwater}</td>
            <td className="tg-5fiw">{item.monthsteam}</td>
            <td className="tg-5fiw">{item.monthsum}</td>
            <td className="tg-5fiw">{item.lastyearmonthtemperature}</td>
            <td className="tg-5fiw">{item.lastyearmonthhotwater}</td>
            <td className="tg-5fiw">{item.lastyearmonthsteam}</td>
            <td className="tg-5fiw">{item.lastyearmonthsum}</td>
            <td className="tg-5fiw">{item.percent1418}</td>  
          </tr>
        </>
        )
      })}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source