# React/Gatsby - Error Using XML Namespace Inside JSX

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
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?

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.

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?