Question 328102 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Need Clarity over why react works like this

I am learning react, and am a beginner, so i started with classes, and have a question. i have this array:

constructor() {
    super();
    this.state = {
      products: [
        {
          name: 'Shoes'
        },
        {
          name: 'Hats'
        },
        {
          name: 'Shirts'
        }
      ]
    };
  }

(its in a constructor as im learning from the basics; that is classes.)
here, i have not specified anything and never mentioned product but i have defined products

and when i pass it in a render call like this:

render() {
    return (
      <div className="App">
        {
          this.state.products.map((product) => {
            return <h1>{product.name}</h1>
          })
        }
      </div>
    );
  }

i said product not products so why is it being called? Does react neglect the (s) or am i just forgetting a very basic concept?

Full code for reference :


import './App.css';


class App extends Component {
  constructor() {
    super();
    this.state = {
      products: [
        {
          name: 'Shoes'
        },
        {
          name: 'Hats'
        },
        {
          name: 'Shirts'
        }
      ]
    };
  }

  render() {
    return (
      <div className="App">
        {
          this.state.products.map((product) => {
            return <h1>{product.name}</h1>
          })
        }
      </div>
    );

  }
}

export default App;

Full code for reference :


import './App.css';


class App extends Component {
  constructor() {
    super();
    this.state = {
      products: [
        {
          name: 'Shoes'
        },
        {
          name: 'Hats'
        },
        {
          name: 'Shirts'
        }
      ]
    };
  }

  render() {
    return (
      <div className="App">
        {
          this.state.products.map((product) => {
            return <h1>{product.name}</h1>
          })
        }
      </div>
    );

  }
}

export default App;
Tags:

2

Answers


  1. 0

    You have create a array names as products and .map() (you can say built-in advance loop) is a property of array in javascript

    You can learn about map function from here https://www.w3schools.com/jsref/jsref_map.asp

    Login or Signup to reply.
  2. 0

    As mentioned in the comments. This question is not about react, its about the map function which is part of javascript.

    In your constructor you have declared an property with the name "state". You have declared this property as an object with the object notation this.products = {}. Inside that object you have declared a property with the name "products". This property is an array, because you used the array notation products: []. Insiede that array you have created some objects { name: 'Shoes'}, { name: 'Hats'} ...

    So your class does have property with the name state, that itself has a property named products, which is an array.

    In your render function, you excess this array via this.state.products and call the map function on that array.

    The map function itself gets an function as a parameter. Lets call this function callback function. What the map function is doing is that it iterates over the array from which you call .map (in this case this.state.products). It then executes the callback function for every object in the array and passes that object as the parameter to your callback function.

    When you define the callback function, you can choose any name for the parameter. Because your array is named products you have chosen the name product. That makes sense, because this item is going to be a product. But you can choose any name for the parameter of the callback function you want. It only defines how the reference to the object of the current iteration is named.

    If you choose to change your array of products, to be an array of persons, you can still call your parameter product, but it will than be an person object.

    But the map function does one more thing. The callback function does also do a return. For every call of the callback function the result which is returned by that function, is added to a new array, which will be returned from the map function when every item has been iterated by the map function.

    So in short, javascript doesn’t neglect the ‘s’. You have just said that the items that get processed by the callback function will have the name ‘product’ inside your function.

    You can read up on the map function here: map

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search