Challenge #1 of 1

Q:
We just built a cool React component! Let's render it with Stimulus! Oh, but there's a catch: we need to be able to pass the current user's `name` directly from our server into React as a prop. What should the Stimulus controller look like to allow this? controller

export default class extends Controller {
    static targets = [
        'name'
    ]

    connect() {
        ReactDOM.render(
            <Product name={this.nameTarget} />,
            this.element
        )
    }
}

export default class extends Controller {
    connect(productName) {
        ReactDOM.render(
            <Product name={productName} />,
            this.element
        )
    }
}

export default class extends Controller {
    static values = {
        name: String
    }

    connect() {
        ReactDOM.render(
            <Product name={this.nameValue} />,
            this.element
        )
    }
}

Rewatch Video

TRACK

JavaScript Frameworks & Tools >

COURSE

Symfony UX: Stimulus >

CHAPTER

Pass Server Data Directly to React Props

Challenge #1 of 1

Q:
We just built a cool React component! Let's render it with Stimulus! Oh, but there's a catch: we need to be able to pass the current user's `name` directly from our server into React as a prop. What should the Stimulus controller look like to allow this? controller

TRACK

JavaScript Frameworks & Tools >

COURSE

Symfony UX: Stimulus >

CHAPTER

Pass Server Data Directly to React Props

Challenge #1 of 1

Q: We just built a cool React component! Let's render it with Stimulus! Oh, but there's a catch: we need to be able to pass the current user's name directly from our server into React as a prop. What should the Stimulus controller look like to allow this? controller

Q:
We just built a cool React component! Let's render it with Stimulus! Oh, but there's a catch: we need to be able to pass the current user's `name` directly from our server into React as a prop. What should the Stimulus controller look like to allow this? controller