Reputation: 11599
I have a MySVG react component which has another composed component inside called svgbox. I can't see svgbox rendering. If I use the svg to draw the rectangle (currently in the svgbox) in the MySVG directly, it works.
What change I have to make the composed svgbox to work?
mysvg.js:
import React from 'react'
import svgBox from 'svgbox'
export default class MySVG extends React.Component {
constructor () {
super();
}
render() {
return (
<div className="row">
<div className="col-md-12">
<svg width="700" height="500">
<svgBox/>
</svg>
</div>
</div>
);
}
}
svgbox.js
import React from 'react'
export default class svgBox extends React.Component {
constructor () {
super();
}
render() {
return (
<g transform="translate(50, 20)">
<rect width="100" height="200" styles="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/>
</g>
);
}
}
Upvotes: 1
Views: 356
Reputation: 4945
I see 3 posible problems here. You must capitalize the component. Use ./ in import from. Use a space before the closing />.
import React from 'react'
//import svgBox from 'svgbox'
import SvgBox from './svgbox'
export default class MySVG extends React.Component {
constructor () {
super();
}
render() {
return (
<div className="row">
<div className="col-md-12">
<svg width="700" height="500">
//<svgBox/>
<SvgBox />
</svg>
</div>
</div>
);
}
}
Upvotes: 1