Next.js Discord

Discord Forum

Render not the same as input data

Unanswered
Sphynx posted this in #help-forum
Open in Discord
SphynxOP
Hi, I have this table that i'm passing data to. When I make the first search, everything works fine, only 1 device gets rendered, but if I delete the search (search for ""), all devices appear, and when I make another search after that, 30 devices remains, even if the small text says one device match your search...
If I reload the page, the first search will work again.
I don't have any idea how this could happen..

Table
export default function WeatherDevicesTable({
  devicesData
}: {
  devicesData: deviceData[];
}) {
  const router = useRouter();
  const [ devices, setDevices] = useState<deviceData[]>([]);
  console.log(devices, 'devices');

  useEffect(() => {
    setDevices(devicesData);
  }, [devicesData]); 
  
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableHeaderCell>Name</TableHeaderCell>
          <TableHeaderCell>MAC Addr</TableHeaderCell>
          <TableHeaderCell>Coords</TableHeaderCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {devices?.map((device) => (
          <TableRow key={device.deviceMAC}>
            <TableCell>{device.infos.name}</TableCell>
            <TableCell>
              <Text>{device.deviceMAC}</Text>
            </TableCell>
            <TableCell>
              <Text>
                {device.infos.coords.lat}, {device.infos.coords.lon}
              </Text>
            </TableCell>
            <TableCell>
              <Button
                onClick={() =>
                  router.push(`/weather/devices/${device.deviceMAC}`)
                }
                variant="secondary"
              >
                Show Data
              </Button>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

4 Replies

SphynxOP
Search code
export default function WeatherDevicesPage({
  accounts,
  searchParams
}: {
  accounts: weatherAccount[];
  searchParams: { q: string };
}) {
  const [allDevices, setAllDevices] = useState<deviceData[]>([]);
  const [filteredDevices, setFilteredDevices] = useState<deviceData[]>([]);

  const searchTerm = searchParams.q || '';

  useEffect(() => {
    const devices = accounts.map(account => account.devices).flat();
    setAllDevices(devices);
  }, [accounts]);

  useEffect(() => {
    const filtered = searchTerm.length > 0
      ? allDevices.filter(device => {
        const contains = (original: string) => searchTerm && original.toLowerCase().includes(searchTerm.toLowerCase());
        return contains(device.deviceMAC ?? '') || contains(device.infos.name.toString());
      })
      : allDevices;

    setFilteredDevices(filtered);
    console.log(filtered, 'filtered');
  }, [searchTerm, allDevices]);
  //(VPN|OGPS|IGPS|IDB|ODB)

  return (
    <main className="p-4 md:p-10 mx-auto max-w-7xl">
      <Title>Weather Devices</Title>
      <Flex alignItems="end" flexDirection="row" className="mt-6">
        <Search />
      </Flex>
      <div style={{ marginTop: '20px' }}>
        <Text>{filteredDevices.length} devices matching your search</Text>
      </div>

      <Card className="mt-6">
        <WeatherDevicesTable devicesData={filteredDevices} />
      </Card>
    </main>
  );
}
To sum up

Input data is not the same as rendered data.
An array of length 2 is logged, when 30-40 devices are rendered
SphynxOP
Please :/
Toyger
I see some redundant code, but overall it should work.
try to output filteredDevices directly without WeatherDevicesTable and check what it will show