0

I have implemented an action to increment each value of my path d in my svg

In the Component

<button onClick={this.props.increase.bind(null, i)}>Increase</button>

The action

export function increase(index) {
  return {
    type: 'INCREMENT_COORDINATES',
    index
  }
}

The Reducer

case 'INCREMENT_COORDINATES' :
  console.log("incrementing coornidates")
  const a = action.index;
  debugger
  return state[a].d.map(x => {
    return x * 2;
  })

I get the error

Uncaught TypeError: state[a].d.map is not a function

See the screenshot

enter image description here

What am i doing wrong and how can i fix it?, i am returning the array of my path d in my action but then i can not map those values

Koala7
  • 1,340
  • 7
  • 41
  • 83

1 Answers1

1

state[a].d is a string. Strings don't have the map function in their prototype. Checkout this thread if you need to parse the path coordinates using the string representation - Extract x,y coordinates from arbitrary SVG path with javascript.

Community
  • 1
  • 1
Max Sindwani
  • 1,267
  • 7
  • 15