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>