Use data from SWR in title?
Unanswered
West African Lion posted this in #help-forum
West African LionOP
I have a page (server component) and a child (client) component. Inside the child client component, I am using SWR to grab some data. I'd like to use a data variable inside my title, but I can't use the new metadata functionality in the client component, so how do I get the data from the child client component to the parent server component so I can set the title dynamically using the data from SWR?
8 Replies
@West African Lion I have a page (server component) and a child (client) component. Inside the child client component, I am using SWR to grab some data. I'd like to use a data variable inside my title, but I can't use the new metadata functionality in the client component, so how do I get the data from the child client component to the parent server component so I can set the title dynamically using the data from SWR?
you can do something like this (this is not documented, but last time i checked it did work)
"use client";
import { useState } from "react";
export default function Page() {
const [title, setTitle] = useState("Hello World");
return (
<div>
{/* Yes, we simply put the <title> tag anywhere in the document. */}
<title>{title}</title>
<input value={title} onChange={e => setTitle(e.target.value)} />
</div>
);
}@joulev you can do something like this (this is not documented, but last time i checked it did work)
ts
"use client";
import { useState } from "react";
export default function Page() {
const [title, setTitle] = useState("Hello World");
return (
<div>
{/* Yes, we simply put the <title> tag anywhere in the document. */}
<title>{title}</title>
<input value={title} onChange={e => setTitle(e.target.value)} />
</div>
);
}
West African LionOP
Seems to work fine with just text, but when I use my SWR data, it errors out and I just see localhost:3000 as the title.
<title>Jacob Graf - {data?.entry?.currentStatusLabel}</title>@West African Lion Seems to work fine with just text, but when I use my SWR data, it errors out and I just see localhost:3000 as the title.
<title>Jacob Graf - {data?.entry?.currentStatusLabel}</title>
try
<title>{`Jacob Graf - ${data?.entry?.currentStatusLabel}`}</title>sorry for the delay, was busy
the reason i think is due to
title only accepting one child@West African Lion Seems to work fine with just text, but when I use my SWR data, it errors out and I just see localhost:3000 as the title.
<title>Jacob Graf - {data?.entry?.currentStatusLabel}</title>
writing like this makes it two children (
"Jacob Graf - " and data?.etc) so it might errori got this error before
West African LionOP
That worked! Thanks!