How do I pass devise data to a React component?

Question

I'm trying to pass Devise data to a React component. Devise is set up correctly, but I can't figure out how to pass the current_user info as props to my react_component. the React props current_user keeps logging as non-existent. I'm using React v5.1 and React-Rails v2.4.

index.html.erb

<%= react_component 'Main', props: {current_user: @current_user} %>

_main.js.jsx

var Main = createReactClass({
    render () {
        return (
            <div>
                {this.props.current_user.id}
                <Header />
                <Body />
            </div>
        );
    }
});

It should be `<%= react_component 'Main', props: {current_user: current_user} %>` and not `<%= react_component 'Main', props: {current_user: @current_user} %>` — Kedarnag Mukanahallipatna, Sep 07 '18 at 04:55

score 0 · Answer 1 · answered Sep 07 '18 at 04:56

0

Try props: {current_user: current_user} instead of props: {current_user: @current_user}

answered Sep 07 '18 at 04:56

Marty

534
8
24

Kedarnag Mukanahallipatna · Answer 2 · 2018-09-07T08:10:22.187

0

It should be like the following

<%= react_component 'Main', props: {current_user: current_user.to_json} %>

React side

var Main = createReactClass({
    getInitialState() {
    return {
      currentUser: this.props.current_user
    };
    render () {
        return (
            <div>
                {this.state.currentUser.id}
                <Header />
                <Body />
            </div>
        );
    }
});

edited Sep 07 '18 at 08:10

answered Sep 07 '18 at 04:57

Kedarnag Mukanahallipatna

2,249
1
11
16

you're missing `to_json`. – Roman Kiselenko Sep 07 '18 at 07:38
Tried this, still not working. I also tried calling {this.state.current_user.id} and that didn't work either. – Aidan Low Sep 07 '18 at 17:07
I guess you're missing something else, Can you show your code with the new changes ? – Kedarnag Mukanahallipatna Sep 08 '18 at 07:18

How do I pass devise data to a React component?

2 Answers2