Render react component from a different file

Question

I have built a react component which I would like to render from within a second component in a separate file.

StoryStrap.react.js

var React = require('react');
import { Input, ButtonInput, Alert } from 'react-bootstrap';

var StoryStrap = React.createClass({ 

  render: function() {

    return (
        <div>
            <Input type="text" placeholder="Headline" />
            <Input type="text" placeholder="Subline" />
        </div>
    );
  }

});

module.exports = StoryStrap;

How can I display this component from the return method of a second component in a different file?

MainSection.react.js

return (
    <div className="container">
        <div className="row row-grid">
            <section id="ROTopBar" className="ro-topBar box-shadow--2dp">

                <div id="storyStraps" className="col-md-4">
                    <h4>Story Straps</h4>
                    <StoryStrap /> //Display storyStrap component here
                </div>

                <div id="storyNames" className="col-md-4">
                    <h4>Name</h4>
                </div>

                <div id="storyInfo" className="col-md-4">
                    <h4>Info</h4>
                </div>

            </section>
        </div>
    </div>
);

So your question is about sharing variables across scripts? Have you ever written modular javascript? You are using a mixture (for some reason) of require and import so you already have the ability to import it..? — nanobar
– nanobar, Commented Dec 9, 2015 at 14:13

Dan Prince · Accepted Answer · 2015-12-09 14:23:37Z

1

You need to require the component.

var StoryStrap = require('./StoryStrap.react.js');

Then you can use <StoryStrap /> in your render function.

It's probably best to try and be consistent with your module import/export syntax. Either use the new ES6 module syntax or the older commonjs style.

Default Export

// ES6 modules
export default React.createClass({ ... });

// ES5 & commonjs
module.exports = React.createClass({ ... });

Default Import

// ES6 modules
import StoryStrap from './StoryStrap.react.js';

// ES5 & commonjs
var StoryStrap = require('./StoryStrap.react.js');

Named Exports

// ES6 modules
export const StoryStrap = React.createClass({ ... });

// ES5 & commonjs
exports.StoryStrap = React.createClass({ ... });

Named Import

// ES6 modules
import { StoryStrap } from './StoryStrap.react.js';

// ES5 & commonjs
var StoryStrap = require('./StoryStrap.react.js').StoryStrap;

edited Dec 9, 2015 at 14:23

answered Dec 9, 2015 at 14:14

Dan Prince

30.1k15 gold badges93 silver badges124 bronze badges

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

8 Comments

nanobar Over a year ago

doesn't need the extension

Dan Prince Over a year ago

Nope, it doesn't but the asker is clearly new to modules and they've used a strange file extension, so I thought it would be best to be explicit.

chinds Over a year ago

Hi Have tried exactly what have written, but nothing is returned when I utilise <StoryStrap /> not even any console errors.

Dan Prince Over a year ago

Try console.log(StoryStrap) from your main section file. See what comes out.

chinds Over a year ago

nothing seems to come out in the console at all, although I have just seen this error: Warning: the query argument to createHref is deprecated; use a location descriptor instead But is todo with the React Router

|

Collectives™ on Stack Overflow

Render react component from a different file

1 Answer 1

Default Export

Default Import

Named Exports

Named Import

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Default Export

Default Import

Named Exports

Named Import

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related