wonderful world
wonderful world

Reputation: 11599

Composed components not working in ReactJS

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

Answers (2)

J. Mark Stevens
J. Mark Stevens

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

Fran&#231;ois Richard
Fran&#231;ois Richard

Reputation: 7035

Is your component properly exported/imported ?

Upvotes: 0

Related Questions