1

I went through the following link for displaying line numbers in the textarea in my ReactJS component.

Html adding line numbers to textarea

There is a perfect solution in this line whose link is this.

This link is working well in the demo, but when I use it in my ReactJS code, It doesn't work. Following is the way in which I'm implementing this

Index.html:

In this file, I'm importing my JS files in this way:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery-linedtextarea.js"></script>
  <link href="jquery-linedtextarea.css" type="text/css" rel="stylesheet" />
<script>
  $(function() {
    $(".lined").linedtextarea(
      {selectedLine: 1}
    );
  });
</script>

EditorModal.js: Then in this file, I'm using textarea as:

<textarea class="lined" id="lined" rows="10" cols="60">JavaScript was originally developed by Brendan
   Eich of Netscape under the name Mocha,
   which was later renamed to LiveScript,
   and finally to JavaScript.
</textarea>

After doing this, I'm seeing any line number in textarea. How can I use thorse JS files with my textarea tag?

Knowledge Seeker
  • 526
  • 7
  • 25
  • Where are those imports happening? In `index.html`? Where is your built app JS file being imported? That jQuery code needs to be run *after* your app has rendered. – Jayce444 Jul 27 '20 at 06:24
  • @Jayce444 yes, imports are in `index.html`. JS file is in the src folder. But when I use this JQuery code in component I get error `TypeError: Cannot read property 'fn' of undefined`. Any idea can I use JQuery code in class component ? – Knowledge Seeker Jul 27 '20 at 06:31

1 Answers1

0

Form elements are different in React. textarea is self-closing tag and also you can't use class in react for it's a reserved keyword in javascript and react and you should use className instead. Also there is a much more simple way to multi-line your textarea value other than using a plugin for it. you are using react which means you can use object literal instead. change your EditorModal.js file to look like this if you are using react and everything should be fine.

import React from 'react';

class EditorModal extends React.Component {

    state = {
        textarea: `
        JavaScript was originally developed by Brendan
        Eich of Netscape under the name Mocha,
        which was later renamed to LiveScript,
        and finally to JavaScript.
        `
    }
    render(){
        return (
            <div>
            <textarea 
                className="lined" 
                id="lined" 
                rows="10" 
                cols="60"
                value={this.state.textarea} 
                />
            </div>
        )
    }
}

export default EditorModal

you can also add the below to EditorModel.js if you have added react to your website and you have not created a simple page react application. remember to add JSX script to your code as well. you can use this guideline too:

'use strict';

class EditorModal extends React.Component {

  state={
    textarea: `
      JavaScript was originally developed by Brendan
      Eich of Netscape under the name Mocha,
      which was later renamed to LiveScript,
      and finally to JavaScript.
    `
  }

  render() {

    return (
        <textarea 
          className="lined" 
          id="lined" 
          rows="10" 
          cols="60"
          value={this.state.textarea} 
        />
    );
  }
}


ReactDOM.render(<EditorModal />, document.getElementById('root'));
elahe karami
  • 641
  • 5
  • 11