Script is not executed in React JS

Question

I am trying to draw rectangle with one diagonal line using canvas and script. But, unfortunately rectangle alone is getting displayed in my browser. It looks like the script is not executed.

Code:

import React, { Component } from 'react';
import '../App.css';

class Graphics extends Component{

    render(){
        return(
            <div id="canvas">
            Draw a diagonal Line in Rectangular

            <canvas id="myCanvas" className="canvas-style" width="200" height="100">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</div>
        );
    }
}

export default Graphics;

halfer · Accepted Answer · 2018-09-09 08:40:16Z

2

You should write your script tag inside componentDidMount().

edited Sep 9, 2018 at 8:40

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Jun 16, 2018 at 18:07

nishant

2,6161 gold badge16 silver badges20 bronze badges

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

Comments

tarzen chugh · Accepted Answer · 2018-06-16 18:14:31Z

0

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  componentDidMount () {
    let c = document.getElementById("myCanvas");
    let ctx = c.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 100);
    ctx.stroke();
  }
  render () {
    return (
      <div className="App">
        <div id="canvas">
          Draw a diagonal Line in Rectangular
        <canvas
          id="myCanvas"
          className="canvas-style"
          width="200"
          height="100" />
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

answered Jun 16, 2018 at 18:14

tarzen chugh

11.3k4 gold badges22 silver badges31 bronze badges

Comments

Rohith Murali · Accepted Answer · 2018-06-16 18:13:25Z

0

You can use the below code,

import React, { Component } from 'react';
import '../App.css';
class Graphics extends Component{
 componentDidMount(){
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   ctx.moveTo(0,0);
   ctx.lineTo(200,100);
   ctx.stroke();
  }
    render(){
        return(
            <div id="canvas">
            Draw a diagonal Line in Rectangular

            <canvas id="myCanvas" className="canvas-style" width="200" height="100">
            </canvas>

            </div>
        );
    }
}

export default Graphics;

answered Jun 16, 2018 at 18:13

Rohith Murali

5,6692 gold badges27 silver badges28 bronze badges

Collectives™ on Stack Overflow

Script is not executed in React JS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related