how to convert <script> tag in react?

Question

As part of my application, I have a tag as shown below. Do I want to know how I should convert it in react?

can I seperate it is a javascript file and load that in this file? if answer is yes, can you show me how?

class App extends Component {
  render() {
    return (
      <div className="App">
  <section class="abcContainer">
        <div class="card border-primary mb-3" style="max-width: 20rem;">
            <div class="card-header">Toolbox</div>
            <div class="card-body">
                <div class="col col-6">
                    <ul class="ml4 js-sortable-copy sortable list flex flex-column list-reset" aria-dropeffect="move">
                        <li class="p1 mb1 yellow bg-maroon" style="position: relative; z-index: 10" draggable="true" role="option" aria-grabbed="false">Item 1</li>
                        <li class="p1 mb1 yellow bg-maroon" style="position: relative; z-index: 10" draggable="true" role="option" aria-grabbed="false">Item 2</li>

                    </ul>
                </div>
            </div>
        </div>
        <div class="jumbotron">
            <div class="col col-6">
                <h2 class="h4 mt1">Copy items here</h2>
                <ul class="p2 border maroon border-maroon js-sortable-copy-target sortable list flex flex-column list-reset" aria-dropeffect="move"></ul>
            </div>
        </div>

    </section>


    <script>
        sortable('.js-sortable-copy', {
            forcePlaceholderSize: true,
            copy: true,
            acceptFrom: false,
            placeholderClass: 'mb1 bg-navy border border-yellow',
        });
        sortable('.js-sortable-copy-target', {
            forcePlaceholderSize: true,
            acceptFrom: '.js-sortable-copy,.js-sortable-copy-target',
            placeholderClass: 'mb1 border border-maroon',
        });
        sortable('.js-grid', {
            forcePlaceholderSize: true,
            placeholderClass: 'col col-4 border border-maroon'
        });
    </script>
      </div>
    );
  }
}

export default App;

Bhojendra Rauniyar · Accepted Answer · 2018-10-05 18:24:48Z

1

You can call them in componentDidMount hook:

mySortable() {
  // sortable() scripts
}

componentDidMount() {
  window.addEventListener('onload', this.mySortable)
}

And then make sure to remove the listener in componentWillUnmount hook:

componentWillUnmount() {
  window.removeEventListener('onload', this.mySortable)
}

answered Oct 5, 2018 at 18:24

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amir Over a year ago

should I write it in App.js after class App extends Component?

Amir Over a year ago

in mysortable should I write the script with <script> tag or without. can you edit ur answer?

Ross Sheppard · Accepted Answer · 2018-10-05 18:29:59Z

1

I would check to see if there is an npm package for the library you are using in that script then import it for that component. For instance, if this is sortable.js then https://www.npmjs.com/package/sortablejs. This makes things more modular.

Otherwise, I would create a separate file with the functions and import them and attach them to which elements need to use them by running the data/elements through the function within a lifecycle method (componentDidMount or render [depending]) or using attributes like onHover, onClick, etc.

If they are functions for the entire web application copy the script tag into your index.html file.

answered Oct 5, 2018 at 18:29

Ross Sheppard

8701 gold badge6 silver badges14 bronze badges

1 Comment

Amir Over a year ago

I already did that. this script is require inside the html file.

Collectives™ on Stack Overflow

how to convert <script> tag in react?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related