Challenge 1 / 1

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 the video