#Server Actions

6 messages · Page 1 of 1 (latest)

timid solarBOT
#
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)

rocky crystal
#

show your code @rancid cove also which version of nextjs are you on

rancid cove
# rocky crystal show your code <@846372267360387112> also which version of nextjs are you on

I made three attempts, this one which would be the action directly on the button as shown in the image of the topic (it didn't work)

export default function Home() {
  
  async function publish(formData: FormData) {
    "use server";
   console.log('aaaa')
  }
 
  return <button action={publish}>Publish</button>;
}

This one using FormAction, but I didn't get any response (this was more of a test to see if anything would happen)

export default function Home() {

  async function publish(formData: FormData) {
    "use server";
   console.log('aaaa')
  }
 
  return <button formAction={publish}>Publish</button>;
}

And finally, this one worked by using the button inside a form

type UserProps ={
  id: string;
  name: string;
}


export async function ListUser() {

  const response = await fetch('http://localhost:8080/user',{method: 'GET', cache: 'no-store', next:{
    tags:['get-user']
  }})

  const data:UserProps[] = await response.json()

  const handleDelete = async (form: FormData) => {
    'use server'
    console.log('teste', form.get('id'))
  }

  return (
    <section className="flex flex-col">
      {data.map((item) =>(
      <li key={item.id} className="text-white flex">
        {item.name}
        <form action={handleDelete}>
          <button className="size-5 bg-zinc-400 rounded-lg" value={'1'} name="id" type="submit">X</button>
        </form>
      </li>
      ))}
    </section>
  )
}
rancid cove
rancid cove
mighty trellis