I am attempting to replicate the functionality of this fiddle: http://jsfiddle.net/jhudson8/135oo6f8/
(I also tried this example
http://codepen.io/adamaoc/pen/wBGGQv
and encountered the same issue with the onClick handler)
My goal is to make the fiddle compatible with server-side rendering, utilizing ReactDOMServer.renderToString
Here is the call I have:
res.send(ReactDOMServer.renderToString((
<html>
<head>
<link href={'/styles/style-accordion.css'} rel={'stylesheet'} type={'text/css'}></link>
</head>
<body>
<Accordion selected='2'>
<AccordionSection title='Section 1' id='1'>
Section 1 content
</AccordionSection>
<AccordionSection title='Section 2' id='2'>
Section 2 content
</AccordionSection>
<AccordionSection title='Section 3' id='3'>
Section 3 content
</AccordionSection>
</Accordion>
</body>
</html>
)));
The Accordion element code is as follows:
// Accordion component code here...
The AccordionSection component code looks like this:
// AccordionSection component code here...
Although everything seems to be functioning correctly and the CSS is applied, the issue lies in the fact that the onClick event does not trigger. Clicking on the accordion elements has no effect. Can anyone provide insight into why the onClick handler may not be registering in this scenario?