Update an organization
Administrators have the ability to update an organization. Currently, Clerk supports updating an organization name.
The organization name can be updated by calling the update
method on the Organization
object. In React and Next.js applications, you can use the useOrganization()
hook to directly access and update the Organization
object.
You can also use the updateOrganization
method, which can be accessed from the Backend API.
Usage
This example uses the useOrganization()
hook to update the organization name.
import { useState, useEffect } from 'react'; import { useRouter } from 'next/router'; import { useOrganization } from '@clerk/nextjs'; export default function EditOrganization() { const [name, setName] = useState(''); const router = useRouter(); const { organization } = useOrganization(); useEffect(() => { if (!organization) { return; } setName(organization.name); }, [organization]); async function submit(e) { e.preventDefault(); try { await organization.update({ name }); router.push(`/organizations/${organization.id}`); } catch (err) { console.error(err); } } if (!organization) { return null; } return ( <div> <h2>Edit organization</h2> <form onSubmit={submit}> <div> <label>Name</label> <br /> <input name="name" value={name} onChange={(e) => setName(e.target.value)} /> </div> <button>Save</button> </form> </div> ); }
import { useState, useEffect } from 'react'; import { useOrganization } from '@clerk/react'; export default function EditOrganization({ organizationId }) { const [name, setName] = useState(''); const { organization } = useOrganization(); useEffect(() => { if (!organization) { return; } setName(organization.name); }, [organization]); async function submit(e) { e.preventDefault(); try { await organization.update({ name }); router.push(`/organizations/${organization.id}`); } catch (err) { console.error(err); } } if (!organization) { return null; } return ( <div> <h2>Edit organization</h2> <form onSubmit={submit}> <div> <label>Name</label> <br /> <input name="name" value={name} onChange={(e) => setName(e.target.value)} /> </div> <button>Save</button> </form> </div> ); }
<form id="edit_organization"> <div> <label>Name</label> <br /> <input name="name" /> </div> <button>Save</button> </form> <script> async function init() { // This is the current organization ID. const organizationId = "org_XXXXXXX"; const organizationMemberships = await window.Clerk.user.getOrganizationMemberships() const currentMembership = organizationMemberships.find(membership => membership.organization.id === organizationId); const currentOrganization = currentMembership.organization; if (!currentOrganization) { return; } editOrganization(currentOrganization); } async function editOrganization(organization) { const form = document.getElementById("edit_organization"); const inputEl = form.getElementsByTagName("input")[0]; if (inputEl) { inputEl.value = organization.name; } form.addEventListener('submit', function(e) { e.preventDefault(); const inputEl = form.getElementsByTagName("input")[0]; if (!inputEl) { return; } try { await organization.update({ name: inputEl.value }); } catch (err) { console.error(err); } }); } init(); </script>
Last updated on January 8, 2024