Add meta Tag dynamically

[arukumar]

Hi, can you please explain, how to add meta tag dynamically in server side rending. I have written something like

import React, { Component, PropTypes } from 'react'
import { defineMessages, FormattedMessage } from 'react-intl'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import DocumentMeta from 'react-document-meta';

export default class metaTag extends React.Component {
    render() {
        const meta = {
            title: 'Some Meta Title',
            description: 'I am a description, and I can create multiple tags',
            canonical: 'http://example.com/path/to/page',
            meta: {
                charSet: 'utf-8',
                name: {
                    keywords: 'react,meta,document,html,tags'
                },
                itemProp: {
                    name: 'The Name or Title Here',
                    description: 'This is the page description',
                    image: 'http://example.com/image.jpg'
                },
                property: {
                    'og:title': 'I am overriding!',
                    'og:type': 'article',
                    'og:image': 'http://example.com/image.jpg',
                    'og:site_name': 'Example Site Name',
                    'og:price:amount': '19.50',
                    'og:price:currency': 'USD',
                    'twitter:site': '@site',
                    'twitter:title': 'I am a Twitter title'
                }
            },
            auto: {
                ograph: true
            }
        };

        return (
            <div>
                <DocumentMeta {...meta} >
                <h2> Check Server side </h2>
            </div>
        );

    }
}

but how to add them to sever.js

[danieljuhl]

Have you read the README and looked at the examples?

You have to call DocumentMeta.renderAsHTML() and inject the result in your server side rendered HTML.

[A-Kasaaian]

@arukumar unfortunately it's really difficult. I have been struggling for about one week to make it render on server side using data coming from another server. You should do it using react-redux and react-thunk. place your API call in an action, then call the action in onEnter event of your route, then in call back onEnter event to continue rendering in route dispatch(theAPICallAction()).then(callBackOfOnEnterEvent()). The API call action should update your redux store, which gives you ability of using received data in your component. I know It is a little bit complicated, but the result would be amazing