#Key issue having 4 different divs for screen size

43 messages · Page 1 of 1 (latest)

rotund raptor
wicked pollenBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

rotund raptor
#

ayone here ?

meager kernel
#

In your UserCard component. Do you map over some array of data?

rotund raptor
#

my question is related that i am using 4 divs different of screen size and keys are same as i write but issue is why it giving it ? i try puting keys but issue isnt going :/

red knoll
#

try using it

# 
{data.map((row, key) => (
          <div key={key} className="border border-black p-4 rounded-lg shadow-md mb-4 w-[80%] mx-auto">
            <div className="flex justify-between">
              <span className="font-semibold">Name:</span>
              <span>{row.name}</span>
            </div>
            <div className="flex justify-between mt-2">
              <span className="font-semibold">Email:</span>
              <span>{row.email}</span>
            </div>
            <div className="flex justify-between mt-2">
              <span className="font-semibold">Telephone:</span>
              <span>{row.telephone}</span>
            </div>
            <div className="flex justify-center mt-4 space-x-2">
              <button className="bg-blue-500 text-white px-4 py-2 rounded">View</button>
              <button className="bg-green-500 text-white px-4 py-2 rounded">Edit</button>
              <button className="bg-red-500 text-white px-4 py-2 rounded" >
                Delete
              </button>
            </div>
          </div>
        ))}
#

key is automatically generated by react

rotund raptor
#

but what about if i want to delte specific id and backend made like this ?



import { NextResponse } from "next/server";

// In-memory data storage for user data
let API: { user: number; name: string; email: string; phone: string }[] = [];
let userIdCounter = 1;

/**
 * Handles POST request to add new user data.
 * Expects name, email, and phone in the request body.
 * Adds the new user to the API array.
 */
export async function POST(request: Request) {
  const data = await request.json(); // Parse the request body

  // Validate the data types for name, email, and phone
  if (
    typeof data.name === "string" &&
    typeof data.email === "string" &&
    typeof data.phone === "string"
  ) {
    // Create a new user object
    const newUser = {
      user: userIdCounter++, // Assign a unique user ID
      name: data.name,
      email: data.email,
      phone: data.phone,
    };

    // Add the new user to the API array (in-memory database)
    API.push(newUser);

    // Return success response
    return NextResponse.json({ message: "User added successfully" });
  } else {
    // If data types are invalid, return an error response
    return NextResponse.json(
      {
        message: "Invalid data type. Please provide valid name, email, and phone.",
      },
      { status: 400 } // Bad request status code
    );
  }
}
#

useridcounter++ ?

red knoll
#

u are incrementing your userIdCounter by 1

#

not recommended

#

also

rotund raptor
#

then plese help me little so i can try to avoid mistake again ?

red knoll
#

first, In-memory doesnt exist in nextjs

#

so

#

u probably need to rework your api so u can use it with a database

rotund raptor
#

i make dummy api for pratice as i am making crud project iin next.js

red knoll
#

ok...

#

what exactly do u want help in?

rotund raptor
#

i am trying that should counter use on frontend side or backend ?

red knoll
#

backend

#

u can generate a uuid on your backend as id

rotund raptor
#

mean uuid is different from all ? and dont need counter ?

red knoll
red knoll
#

since this object oriented its probably mongodb right?

#

for mongodb i always use the crypto api from node

#

to generate uuid

#

u dont need to do that btw

#

u can use any random string or number as id

#

in mongodb for example...

rotund raptor
#

will try to do ... once done then tell you !!! thank for help bro !!!

red knoll
#

:)*

rotund raptor
#

is node.js based in next.js ?

#

or next.js backend is differnt from node ?

red knoll
#

yes nextjs uses node as backend

rotund raptor
#

ok

red knoll
#

but it also uses the edge runtime for the middleware for example

#

its basically like node but many things removed for perfomance