React/Gatsby - Error Using XML Namespace Inside JSX

JavaScript
#1

Hi,

I am attempting to use an Google Custom Search Engine on my page. This requires the use of this tag:

<gcse:searchbox-only></gcse:searchbox-only>

So when I’m creating this page with Gatsby/React, I try and do the following:

import React from 'react'

const GcseSearchboxOnly = (p: *) => {
  const { children, ...props } = p;
  return React.createElement("gcse:searchbox-only", props, children);
};

export default () => (
      <div class='col-md-4 the-search-box'>
        <span><gcse:searchbox-only></gcse:searchbox-only></span>
      </div>
)

But then when I try and run the Gatsby develop server, I get this error:

ERROR in ./src/pages/index.js
Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
SyntaxError: C:\Users\dude\desktop\alpha-parasites.org\src\pages\index.js: Unexpected token, expected "," (5:28)

  3 | //import Container from '../components/container'
  4 |
> 5 | const GcseSearchboxOnly = (p: *) => {
    |                             ^
  6 |   const { children, ...props } = p;
  7 |   return React.createElement("gcse:searchbox-only", props, children);
  8 | };

Any sugggestions on how to fix this “syntax” error?

#2
#3

Thanks. I’ve realized that part of my problem is that I don’t understand React very well.

I’m taking the FCC React course right now before I attempt to fix this issue. As soon as I finish that course, I bet the solution you suggest from Stack Overflow will be understandable by me.

Thank you.

#4

I’ve studied React a bit more and though I still suck at it, I think this would be an easier way to implement the Google CSE: https://developers.google.com/custom-search/docs/element#html5

What do you think?

#5