Ed Lynch Ed Lynch -4 years ago 41
React JSX Question

Cant reference passed value attribute in returned html code

I'm sure I'm doing something dumb but I don't see why this code wont work. It's react code that I'm compiling with webpack:

var markers = this.state.assets;
assets = assets.map(function(asseti,index){
return(
asseti.map(function(asset, index){
return(
<Marker position=[{asset.location.coordinates[0]},{asset.location.coordinates[1]}]>
<Popup>
<span>A pretty CSS3 popup.<br/>Easily customizable.</span>
</Popup>
</Marker>

)
})
)
});


I get the error

JSX value should be either an expression or a quoted JSX text

90 | asseti.map(function(asset, index){
91 | return(
> 92 | <Marker position=[{asset.location.coordinates[0]},{asset.location.coordinates[1]}]>
| ^
93 | <Popup>
94 | <span>A pretty CSS3 popup.<br/>Easily customizable.</span>
95 | </Popup>


Thanks, Ed.

Answer Source

You need to pass props arrays wrapped within {} as it is a JS expression

i.e position={[asset.location.coordinates[0],asset.location.coordinates[1]]}

 markers = this.state.assets;
  assets = assets.map(function(asseti,index){
    return(
      asseti.map(function(asset, index){
        return(
          <Marker position={[asset.location.coordinates[0],asset.location.coordinates[1]]}>
            <Popup>
              <span>A pretty CSS3 popup.<br/>Easily customizable.</span>
            </Popup>
          </Marker>

        )
      })
    )
  });
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download