Understanding the Render Method and JSX in React

React is a JavaScript library used for building interactive user interfaces. It allows developers to create applications with a fast and refreshing user experience without having to reload the whole page. A fundamental part of React is the render() method, which is responsible for describing what should be displayed on the screen.

In the quiz question, the render() method contains a JavaScript expression mapping over an array (langs), with the aim of displaying each individual language contained in it. The correct answer to the question was - "Displays the list of languages in the array".

Understanding JSX and curly braces

The main syntax used in the render() method is JSX. JSX helps React to make our code more readable and write HTML tags within JavaScript. In the given code, the langs array is displayed using JSX and the map() function in the following manner:

render() {
  let langs = ["Ruby","ES6","Scala"]
  return (
    <div>
    {langs.map(it => <p>{it}</p>)}
    </div>
  )
}

Here, the curly braces ({}) in JSX are used to embed JavaScript expressions. The langs.map() call in the curly braces is a JavaScript expression which iterates over each item in the langs array.

Displaying an Array of Data in JSX

As per the React best practice, arrays or lists of elements must contain a unique "key" prop. This "key" prop is necessary for React to identify each element in the list. However, since the code in the quiz question does not use a key prop, it doesn't follow this best practice.

Here is how you should ideally translate an array into a list of JSX components using map(), while including a 'key' prop:

render() {
  let langs = ["Ruby","ES6","Scala"]
  return (
    <div>
    {langs.map((it, index) => <p key={index}>{it}</p>)} 
    </div>
  )
}

In this modified code, the index parameter is the second parameter of the map() callback and its value is the index of the current element in the array. It acts as a unique identifier for each paragraph tag created through mapping.

Conclusion

The render() method, JSX, and JavaScript's map() function are fundamental React concepts for displaying lists of data. Always remember to incorporate the 'key' prop when rendering lists for optimal performance of your React applications.