### Author:  [@bgchen](https://talk.observablehq.com/u/bgchen)
#### Post date: [September 4, 2018, 9:21pm UTC](https://talk.observablehq.com/t/update-react-component-without-re-rendering-entire-element/1106/6 "2018-09-04T21:21:07Z")
I don’t know how to answer the rest of your question, but note that you need another set of parentheses when passing `chart_specs` to `jsx`. Try:
`jsx({ Chord, chord_data, chord_spec, height: 400, width })(chart_specs)`
(note that `jsx(stuff)` returns a function, so you need to pass it `chart_specs` as an argument).
---
### Author:  [@john-clarke](https://talk.observablehq.com/u/john-clarke)
#### Post date: [September 5, 2018, 3:20pm UTC](https://talk.observablehq.com/t/update-react-component-without-re-rendering-entire-element/1106/7 "2018-09-05T15:20:59Z")
@bgchen Thanks for the tip. I tried that approach but it didn’t work for me. In the end the following worked
`linex = ReactDOM.render(jsx({ ResponsiveLine, line_data, line_specs, height: 400, width: 900 })'${line_specs}', line_dom)`
Note: The single quotes around `${line_specs}` are supposed to be template ` delimiters, but I can’t figure out how to escape them here.
I also resolved the ResonsiveLine issue – you need to make sure your target div has a **height** style property defined or it won’t render (see nivo docs).
I used `line_dom = html''`
Which seems to work.
---
### Author:  [@john-clarke](https://talk.observablehq.com/u/john-clarke)
#### Post date: [September 5, 2018, 7:00pm UTC](https://talk.observablehq.com/t/update-react-component-without-re-rendering-entire-element/1106/8 "2018-09-05T19:00:33Z")
> **[Nivo React Components](https://beta.observablehq.com/@john-clarke/nivo-react-components)**
>
> An Observable notebook by John Clarke.
---
### Author:  [@RandomFractals](https://talk.observablehq.com/u/RandomFractals)
#### Post date: [September 5, 2018, 8:13pm UTC](https://talk.observablehq.com/t/update-react-component-without-re-rendering-entire-element/1106/9 "2018-09-05T20:13:56Z")
still broke on my end:
> **[Nivo React Components](https://observablehq.com/@john-clarke/nivo-react-components)**
>
> An Observable notebook by John Clarke.
just comes up nivo blank:
---
### Author:  [@john-clarke](https://talk.observablehq.com/u/john-clarke)
#### Post date: [September 5, 2018, 8:44pm UTC](https://talk.observablehq.com/t/update-react-component-without-re-rendering-entire-element/1106/10 "2018-09-05T20:44:48Z")
Thanks @RandomFractals – I think something broke with importing `ReactDOM = r('react-dom')` since @tom looked at this earlier. Could it be an issue with how Observable imports?
I looked up react-dom with `https://beta.observablehq.com/@tmcw/module-require-debugger` and it came back with `require('react-dom@16.4.2/index.js').catch(() => window.checkDCE)` but I couldn’t get that to work.
@tom any ideas?
---
### Author:  [@john-clarke](https://talk.observablehq.com/u/john-clarke)
#### Post date: [September 5, 2018, 8:51pm UTC](https://talk.observablehq.com/t/update-react-component-without-re-rendering-entire-element/1106/11 "2018-09-05T20:51:06Z")
@RandomFractals The following seems to fix the issue:
`ReactDOM = require('https://wzrd.in/standalone/react-dom@latest')`
---
### Author:  [@RandomFractals](https://talk.observablehq.com/u/RandomFractals)
#### Post date: [September 5, 2018, 8:53pm UTC](https://talk.observablehq.com/t/update-react-component-without-re-rendering-entire-element/1106/12 "2018-09-05T20:53:08Z")
now we talking 🙂
cool chord diagram!
---
### Author:  [@bgchen](https://talk.observablehq.com/u/bgchen)
#### Post date: [September 6, 2018, 12:34am UTC](https://talk.observablehq.com/t/update-react-component-without-re-rendering-entire-element/1106/13 "2018-09-06T00:34:11Z")
I’m glad you were able to get it to work! Note that two of the user links in your first paragraph are broken due to a missing “/” (also, note that my observable link is (confusingly) [@bryangingechen](https://observablehq.com/@bryangingechen), not that I really contributed enough to be acknowledged so kindly!).
As it turns out, my advice didn’t work because of a bug in my understanding of template literals. I had thought (incorrectly) that
`someFunction(stuff)`some template string``
was equivalent to
`spec = `some template string`; someFunction(stuff)(spec)`,
but in fact tag functions are a bit more complicated in general. As usual, reading [the relevant web docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates) was enlightening. In short, your solution seems like the right one to me too.
By the way, to include backticks in markdown, just use multiple backticks as delimiters, [here’s the discussion in the markdown syntax](https://daringfireball.net/projects/markdown/syntax#code).
---
### Author:  [@john-clarke](https://talk.observablehq.com/u/john-clarke)
#### Post date: [September 6, 2018, 1:16am UTC](https://talk.observablehq.com/t/update-react-component-without-re-rendering-entire-element/1106/14 "2018-09-06T01:16:11Z")
@bgchen Thanks for the follow-up. I had to update the reference to ReactDOM once again as it was failing again. Links are corrected. [https://beta.observablehq.com/@john-clarke/nivo-react-components](https://beta.observablehq.com/@john-clarke/nivo-react-components)
---
### Author:  [@bgchen](https://talk.observablehq.com/u/bgchen)
#### Post date: [September 6, 2018, 1:48am UTC](https://talk.observablehq.com/t/update-react-component-without-re-rendering-entire-element/1106/15 "2018-09-06T01:48:31Z")
Yeah, unfortunately, issues with unpkg (which `require` uses by default), wzrd.in, and bundle.run are all too frequent. There’s another thread about them [here](https://talk.observablehq.com/t/bundle-run-errors-breaking-notebooks/1050), with no solution, sadly.