Deano Deano - 10 months ago 67
React JSX Question

integrating js code inside react component

I have converted a component that displays chart bar, and it requires this js snippet to run, what is the correct way of integrating it inside my JSX code?

/** START JS Init "Peity" Bar (Sidebars/With Avatar & Stats) from sidebar-avatar-stats.html **/
$(".bar.peity-bar-primary-avatar-stats").peity("bar", {
fill: ["#2D99DC"],
width: 130,

I have seen this libraries on npm website, but they mostly deal with external scripts not internal

here is my component:

import React, { Component } from 'react';

export default class App extends Component {
render() {
return (
"How can I render js code here?"

Answer Source

You can use refs and componentDidMount callback in order to initialize jquery plugins, like so

class App extends React.Component {
  componentDidMount() {
    $(this.barChart).peity("bar", { 
      fill: ["#2D99DC"], width: 130
  render() {
    return <div>
      <div ref={ (node) => { this.barChart = node }  }>
        <span class="bar">5,3,9,6,5,9,7,3,5,2</span>
        <span class="bar">5,3,2,-1,-3,-2,2,3,5,2</span>
        <span class="bar">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>

  <App />,
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<div id="container"></div>