Warning: Failed propType: Invalid prop `property` supplied to `DocumentMeta`. Check the render method of `SideEffect(DocumentMeta)`. - Githubissues

kodyl / react-document-meta

HTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API.

MIT License

320 stars 23 forks source link

Warning: Failed propType: Invalid prop `property` supplied to `DocumentMeta`. Check the render method of `SideEffect(DocumentMeta)`. #5

Closed seeden closed 9 years ago

seeden commented 9 years ago

Hi after upgrade I can see this warning: Warning: Failed propType: Invalid prop property supplied to DocumentMeta. Check the render method of SideEffect(DocumentMeta).

I am using your component:

const basicMetadata = {
  title: 'Meetbus - Make your travels more fun',
  description: 'Explore awesome places around the world and meet other travelers',
  meta: {
    name: {
      keywords: 'traveling, exploring, wanderlust, adventure, travel, meetup, new zealand'
    },
    property: {
      'og:site_name': 'meetbus.com',
      'fb:app_id': '341640709299908',
      'fb:admins': [1107946314, 1095566451]
    }
  }
};

  render() {
        <DocumentMeta {...basicMetadata} />

Is there any problem with "property" field?

danieljuhl commented 9 years ago

It doesn't support arrays. Only strings is supported for the values.

danieljuhl commented 9 years ago

What do you expect it to render from the array? Two tags or a comma joined value?

seeden commented 9 years ago

Output for the array is:

<meta property="fb:admins" content="1107946314">
<meta property="fb:admins" content="1095566451">

It is in the documentation of the Facebook for the fb:admins with multiple admins https://developers.facebook.com/docs/platforminsights/domains

danieljuhl commented 9 years ago

@seeden, I was a bit to quick. Arrays is supported! And I just tested your code - it works fine. Which version of react-document-meta are you using?

danieljuhl commented 9 years ago

class MyComponent extends React.Component {
  render() {
    const basicMetadata = {
      title: 'Meetbus - Make your travels more fun',
      description: 'Explore awesome places around the world and meet other travelers',
      meta: {
        name: {
          keywords: 'traveling, exploring, wanderlust, adventure, travel, meetup, new zealand'
        },
        property: {
          'og:site_name': 'meetbus.com',
          'fb:app_id': '341640709299908',
          'fb:admins': [1107946314, 1095566451]
        }
      }
    };

    return (
      <DocumentMeta {...basicMetadata} />
    );
  }
}

<head>
  <title>Meetbus - Make your travels more fun</title>
  <meta name="keywords" content="traveling, exploring, wanderlust, adventure, travel, meetup, new zealand" data-rdm="">
  <meta name="description" content="Explore awesome places around the world and meet other travelers" data-rdm="">
  <meta property="og:site_name" content="meetbus.com" data-rdm="">
  <meta property="fb:app_id" content="341640709299908" data-rdm="">
  <meta property="fb:admins" content="1107946314" data-rdm="">
  <meta property="fb:admins" content="1095566451" data-rdm="">
</head>

Indeed there is a warning, which I'll investigate - but everything seems to work.

danieljuhl commented 9 years ago

react-document-meta only accept strings, so you should not have the IDs as numbers.

'fb:admins': ['1107946314', '1095566451']

There is still a warning because of the array, but that is fixed in the version coming out today.

danieljuhl commented 9 years ago

Warning removed in react-document-meta@1.1.0

seeden commented 9 years ago

thanks