Search code examples
javascriptarraysreactjslogicarray-map

Component Won't Render on Map Function

I'm using this component progress to draw a progress line. It works when I hardcode the values, but when I use it inside a map function it does not pick up the values.

Can someone explain why this doesn't work?.

import { Line, Circle } from 'rc-progress';

render(){ 

  const elements = [{'percent':10,'color':'#3FC7FA'}, {'percent':30,'color':'#85D262'},{'percent':80,'color': '#FE8C6A'}]
return (
  {elements.map((obj) => 
      <Line percent="{obj.percent}" strokeWidth="6" strokeColor="{obj.color}" trailWidth="6" /> 
   )}
)
}
Solution

  • You missed the return statement:

    render(){ 

  const elements = [{'percent':10,'color':'#3FC7FA'}, {'percent':30,'color':'#85D262'},{'percent':80,'color': '#FE8C6A'}]
  return elements.map((obj) => 
      <Line percent="{obj.percent}" strokeWidth="6" strokeColor="{obj.color}" trailWidth="6" /> 
   )
}