mapping prop items in an array in React

Question

I have an array in which I want to loop through each element and find it's value from the props which is passed to the component.

array = ['a','b','c']

I want to save the value of 'this.props.a' to a variable 'a; and similarly for other variables considering props does have the values saved , how can I do that ?

sample code :

buildURL() {
    const param_array=array = ['a','b','c']
    const param_values=[];
    let queryStringUrl = window.location.href.split('?')[0];
    param_array.map((param)=>{
      param_values.push(encodeURIComponent(this.props.param)) 
    })

Here I need this.props.search_item , this.props.search_type , this.props.article_quality and this.props.min_views .

How can I get that?

Need more description and code in order to understand, please update the question — satwik, Mar 07 '19 at 03:28
Seems like you're looking for something like lodash's `pick` ? https://lodash.com/docs/4.17.11#pick — ostrebler, Mar 07 '19 at 03:31
@HimanshuJotwani, why do you want these values stored in variables in the function scope? what will you do with them then? I think if you show that then we'll be able to provide a much simpler solution. — lecstor, Mar 07 '19 at 04:50

Henry Woody · Accepted Answer · 2019-03-07T04:50:04.850

2

Currently your code looks for this.props.param on each iteration of the map. Note that this does not mean it looks for the key in props equal to the value of param the variable, but looks for the key in props called "param" (equivalent to this.props["param"]).

To use a variable as a key in an object you need to use the brackets notation: this.props[param]

In your code:

buildURL() {
    const param_array=['search_term','search_type','article_quality','min_views'];
    const param_values=[];
    let queryStringUrl = window.location.href.split('?')[0];
    param_array.map((param)=>{
      paramValue = this.props[param];
      param_values.push(encodeURIComponent(paramValue)) 
    })
}

Edit

To store a record of each key, value pair for those keys in param_array and values from this.props, you can create a new object in this way:

buildURL() {
    const paramArray=['search_term','search_type','article_quality','min_views'];
    const paramObject = {};
    for (const param of paramArray) {
        paramObject[param] = this.props[param];
    }
    // ...
}

Basically, create a new, empty object (paramObject), then loop over each param in paramArray and assign the value for that param in the new object equal to the value for that param in this.props. The final object will have a key for each param in paramArray and values coming from this.props.

edited Mar 07 '19 at 04:50

answered Mar 07 '19 at 03:37

Henry Woody

14,024
7
39
56

Could you please tell me how can I store it in a variable for that block scope? Somewhat like search_term =this.props.search_term – Himanshu Jotwani Mar 07 '19 at 03:49
@HimanshuJotwani I'm not sure what you mean exactly. Do you mean store the value of the prop within the `.map` scope? – Henry Woody Mar 07 '19 at 03:53
Not exactly , I want to store a variable named search_term in the scope of build_url – Himanshu Jotwani Mar 07 '19 at 04:06
@HimanshuJotwani if you want a variable called (exactly) `search_term`, you can just define it like `search_term = this.props.search_term;`. If you mean something more general, you can store values in an array or object, but the values here are already stored in the `props` object for you. Do you want an object that contains only the keys specified in `param_array`? What's the use case? – Henry Woody Mar 07 '19 at 04:07
I want to loop through param_array , create a variable based on the values of param_array by looping and store a variable for each element of param_array with its value as this.props.variable_name – Himanshu Jotwani Mar 07 '19 at 04:18
1

@HimanshuJotwani I made an edit to the post, does that help? – Henry Woody Mar 07 '19 at 04:23

bird · Answer 2 · 2019-03-07T04:06:25.580

1

You can try object[property]

param_array.map((param)=>{
   param_values.push(encodeURIComponent(this.props[param])) 
})

UPDATE: If you want to store these into a variable, you can do it with reduce.

buildURL() {
    const param_array=['search_term','search_type','article_quality','min_views'];
    let queryStringUrl = window.location.href.split('?')[0];
    const param_values = param_array.reduce((acc, param)=>{
      acc[param]= encodeURIComponent(this.props[param])
      return acc;
    }, {})
    return param_values
}

Now your param_values is an object with the format

//param_values
{
  search_term: /*encoded str*/,
  search_type: /*encoded str*/,
  ...
}

And you can access it easily.

edited Mar 07 '19 at 04:06

answered Mar 07 '19 at 03:34

bird

1,872
1
15
32

Could you tell me how can I store it in a variable for that block scope , somewhat like let search_term = this.props.search_term – Himanshu Jotwani Mar 07 '19 at 03:50
I updated my answer. Is that what you are looking for? – bird Mar 07 '19 at 04:10
Yes , kind of that but by looping through the array so that I don't have to type manually that search_term : this.props.search_term – Himanshu Jotwani Mar 07 '19 at 04:19
ya. `reduce` looping too, and you don't have to type it manually. Did you read the code I updated? – bird Mar 07 '19 at 04:22

mapping prop items in an array in React

2 Answers2