Passing Node.js data to React

Question

I am refacoring a component to React code.

Previously I was compiling it with Jade and passing the i18n text from a Jade global directly to the HTML. Something like this:

// in Node.js / Express
const text = require('./assets/texts.json');
app.get('/route', (req, res) => {
    render('page', text);
});

and in Jade I would have:

h3= text.en.title
p= text.en.subtitle

Now I am doing this with React and I wonder how to pass data into it?

If I do const text = require('./texts.json'); inside the react file I get a error...

How to pass data from Node to React in the same way as I did with Jade? Is it only possible via Ajax on the client side already?

you could use json-loader github.com/webpack/json-loader, but maybe your question is more about express? — Daniel Lizik
– Daniel Lizik, Commented Aug 11, 2016 at 19:15
@Daniel_L in that case the whole json file with all languages would be loaded via JavaScript to the client right? I would like to just add the correct translated words server side to reduce data loaded by client. — Rikard
– Rikard, Commented Aug 11, 2016 at 19:18
I supose I could add a data-text attribute with a json string in the element where react is going to mount... but wonder if there is another more clean way. — Rikard
– Rikard, Commented Aug 11, 2016 at 19:20
you can have another script that exports only what you need from your json file — Daniel Lizik
– Daniel Lizik, Commented Aug 11, 2016 at 19:20
ya it sounds like this is something you would fetch from your server as your root component mounts — Daniel Lizik
– Daniel Lizik, Commented Aug 11, 2016 at 19:21

Rikard · Accepted Answer · 2016-08-11 19:50:41Z

1

Ok, so getting downvotes in the question I go for the answer I found...

I ended up passing my text information in my DOM element that will receive my React component. So In Jade I did:

-
    var words = ["calculate_price", "price_info", etc etc... ];
    var text = words.reduce(function(obj, word){
        return (obj[word] = lang[word], obj);
    }, {});
#dialog_wrapper(data-text= JSON.stringify(text))

and in the file where I mount the component:

const dialogWrapper = document.getElementById('dialog_wrapper');
const dialogText = JSON.parse(dialogWrapper.dataset.text);
ReactDOM.render(<BookingDialog text={dialogText}/>, dialogWrapper);

and by last in the React component I did:

componentDidMount() {
    console.log(this.props.text); // all here!
}

answered Aug 11, 2016 at 19:50

Rikard

7,82513 gold badges61 silver badges99 bronze badges

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

Collectives™ on Stack Overflow

Passing Node.js data to React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related