Menu
I'm trying to set a next HEAD component to a string value (which is actually returned from woocommerce as a Yoast Head string)
Trouble is the content of the html string never gets added to the HEAD component!
There are other HEAD components above this but as I understand it it's additive?
const Product = ({ product }) => {
const classes = useStyles();
const addToCart = useContext(BasketContext);
return (
<>
<Head dangerouslySetInnerHTML={{ __html: product.yoast_head }} />
<div className={classes.root}>
<Grid container spacing={1}>
<Grid item className={classes.grid} xs={6}>
<Card addToCart={addToCart} product={product} />
</Grid>
</Grid>
<TabPanel product={product} />
</div>
</>
);
};
Update I've got a fix for this with html-react-parser but I'll leave this open on the off chance someone has a better way!
883
I was trying to do the same thing and I was able to convert the YOAS Head block to a be parsed to react element array using "html-react-parser"
import parse from 'html-react-parser'
...
const yoastHead = parse(bookDetail.yoast_head)
return (
<Layout>
<Head>
{yoastHead}
</Head>
<h1 dangerouslySetInnerHTML={{ __html: bookDetail.title.rendered }} />
<div dangerouslySetInnerHTML={{ __html: bookDetail.content.rendered }} />
</Layout>
)
answered May 05 '26 08:05
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With