how to render html script in reactjs

Question

<li><a id="customPopover">Data Source One</a>
<i class="fa fa-times"></i>
  <div class="axis_popover left">
        <div class="axis_popover_title">Title</div>
          <div class="axis_popover_content">
            <p><input type="text" class="form-control box_ip"/></p>
            <p><button class="btn">button</button></p>
          </div>                                                    
    </div>

having script like this

having html code like this and i need to render in react.

$("#customPopover").click(function() { $(".axis_popover").toggle(); }); — mantena siva, Jul 18 '17 at 09:08
First read this https://facebook.github.io/react/docs/hello-world.html and you can try by writing own — Abhay Dixit, Jul 18 '17 at 09:41
i tried like this handleClick(){this.setState(toggle())} and in
Does this answer your question? [How do you import a javascript package from a cdn/script tag in React?](https://stackoverflow.com/questions/44877904/how-do-you-import-a-javascript-package-from-a-cdn-script-tag-in-react) — Martin, Apr 27 '21 at 15:01

Abhay Dixit · Answer 1 · 2017-07-27T14:44:38.960

0

You can refer this example that will run using ReactJS. It will give you basic idea about ReactJS.

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- use react js 15.0 js -->
</head>

<body>
    <div id="showHere"></div>
    <script type="text/babel">
        var Example = React.createClass({ 
            
    render: function() { 
        return ( <div>
  <a id="customPopover">Data Source One</a>
  <i class="fa fa-times"></i>
  <div class="axis_popover left">
        <div class="axis_popover_title">Title</div>
          <div class="axis_popover_content">
            <p><input type="text" class="form-control box_ip"/></p>
            <p><button class="btn">button</button></p>
          </div>                                                    
    </div>
 </div>) 
    } 
        }); 
        
ReactDOM.render(
 <div>
        <Example></Example>
         
        </div>,
    document.getElementById('showHere') );
    </script>
</body>

</html>

edited Jul 27 '17 at 14:44

answered Jul 18 '17 at 10:26

Abhay Dixit

998
8
28

instead of html i need in jsx – mantena siva Jul 18 '17 at 10:59
then convert it and put it in same place. – Abhay Dixit Jul 18 '17 at 11:36
in the sense i am using ES6 and i need the component render in es6 – mantena siva Jul 18 '17 at 11:44
It will run even if you just add in simple html file. – Abhay Dixit Jul 18 '17 at 11:47
I already have components in es6 on click on button i need popover. I already have html file for popover which I posted in question. So for that i am having script like below $("#customPopover").click(function() { $(".axis_popover").toggle(); }); how to render in component – mantena siva Jul 18 '17 at 11:48

how to render html script in reactjs

1 Answers1