CODEWITHSUNDEEP
react-nativereact-navigation
Veri Merkezi
Veri Merkezi

Reputation: 109

React Navigation array props

react-navigation navigate in array unexpected tokens ?

const { navigate } = this.props.navigation;
navigate('Properties', { 
    list.map((item) => {
       ["module"+item.id]:this.state["module"+item.id]
    }) 
});

Returns error:

Unexpected token, expected ";"

Upvotes: 1

Views: 725

Answers (2)

Kraylog
Kraylog

Reputation: 7563

First, when you provide a single expression arrow function that returns an object, you have to wrap that object with parentheses, otherwise the interpreter thinks the braces are a block, and not the object root.

list.map((item) => ({
   ["module"+item.id]: this.state["module"+item.id]
}))

Second, it looks like you're trying to create the params object from a list of values.
But the result of the map you wrote, is a list of objects, not an object.

One of the ways to create that object is by using the reduce function:

list.reduce((accumulator, current) => (Object.assign(accumulator, {["module"+current.id]: this.state["module"+current.id]})), {});

But perhaps a more performant and simpler way would be to just do it with a local side effect:

function prepareParams(list) {
  let result = {};
  list.forEach(item => result["module"+item.id] = this.state["module"+item.id]);
  return result;
}

And then in your navigate:

navigate('Properties', prepareParams(list));

Upvotes: 2

moritzwick
moritzwick

Reputation: 621

Navigation params have to be in object format so you have to add a key

navigate('Properties', { someKey: list.map((item) => { ... }) });

Upvotes: 1

Related Questions