CODEWITHSUNDEEP
javascriptreactjs
Gaspar Nagy
Gaspar Nagy

Reputation: 4537

Pass in parameter to a react component when rendered from a method

I am playing with React.js (I am new to it) and had a strange issue.

I can render a sub-component from the parent's render. This works:

<Station id="1" label="Start" />

I tried to extract this to a method:

renderStation(id, label) {
  return <Station id="{id}" label="{label}" />
}
// call it from the render() as
{this.renderStation(1, "Start")}

Strangely it passes in the strings "{id}" and "{label}" as props instead of "1" and "Start". Rendering a <div>{id}</div> from the same method just works fine. What is wrong?

See my playground with the repro here: https://jscomplete.com/repl?j=HybEKZuub

Upvotes: 0

Views: 152

Answers (2)

BEJGAM SHIVA PRASAD
BEJGAM SHIVA PRASAD

Reputation: 2241

To Avoid confusion.. 

let props = {
 "id":id,
 "label":label
}
<Station {...props} />

Upvotes: 1

An Nguyen
An Nguyen

Reputation: 1478

Please remove the double quotes, and you are good to go.

<Station id={id} label={label} />

Upvotes: 2

Related Questions