Passing Arrays as Props in React: JSX Syntax and Expression Evaluation

In React development, props serve as the primary mechanism for data transfer between components, and their correct usage is crucial for application performance and maintainability. This article provides an in-depth analysis of the syntactic details and underlying principles involved in passing arrays as props through concrete case studies.

Semantic Parsing of Curly Braces in JSX

JSX, as a syntax extension for JavaScript, is designed to intuitively describe UI structures within JavaScript code. Curly braces {} in JSX serve a specific semantic function: they signal a transition from JSX markup language to JavaScript expression evaluation mode. When React parses JSX, content wrapped in curly braces is treated as JavaScript expressions, evaluated, and the results are embedded into the generated DOM structure.

This design leads to an important characteristic: anything within curly braces can be any valid JavaScript expression, including variable references, function calls, arithmetic operations, and—central to this discussion—array literals. For example:

<MyComponent data={[1, 2, 3]} />

In this example, [1, 2, 3] inside the curly braces is evaluated as a JavaScript array literal, and the evaluation result (the array object) is passed as the data prop to the MyComponent component.

Comparative Case Analysis

Consider the following three scenarios for passing arrays as props, which reveal important differences in JSX parsing:

Case 1: Variable Passing

var items = ['item1', 'item2'];
<Navigation config={items} />

Here, items is a predefined variable. The curly braces instruct the JSX parser: "Please evaluate the identifier items." The evaluation result is the array object referenced by the variable items, which is correctly passed to the component.

Case 2: Direct String Literal Passing

<Navigation config="React" />

In this case, "React" in config="React" is a string literal. The JSX parser can directly recognize this format and parse it as a string value without requiring curly braces. This is syntactic sugar provided by JSX for common scenarios, making string passing more concise.

Case 3: Pitfalls in Array Literal Passing

<Navigation config=['!!!'] />  // Incorrect usage
<Navigation config={['!!!']} />  // Correct usage

The first approach fails because the JSX parser interprets config=['!!!'] as attribute assignment syntax rather than a JavaScript expression. Specifically, it attempts to parse ['!!!'] as an attribute value, but JSX attribute value syntax does not support array literals containing square brackets directly.

The second approach uses curly braces to explicitly indicate that ['!!!'] should be evaluated as a JavaScript expression. Upon encountering the curly braces, the parser switches to expression parsing mode, correctly identifies this as an array literal, creates the corresponding array object, and passes it to the component.

Expression Evaluation Mechanism

The key to understanding curly braces lies in recognizing that content within them is not merely text substitution but complete expression evaluation. Consider this more complex example:

<DataDisplay 
  items={[
    {id: 1, name: 'Item A'},
    {id: 2, name: 'Item B'}
  ]} 
/>

Here, the content within the curly braces is an array literal containing two objects. The JSX parser will:

1. Recognize the curly braces and enter expression evaluation mode
2. Parse the content within square brackets as an array literal
3. Evaluate the array elements (object literals)
4. Pass the final evaluation result (the array object) to the items prop

This mechanism applies equally to other JavaScript expressions:

<Counter initialValue={5 + 3} />  // Passes 8
<Greeting message={'Hello, ' + userName} />  // String concatenation
<DataList items={getItems()} />  // Function call result

PropTypes Type Validation

Although PropTypes were not used in the original question, adding type validation for array props is an important best practice in real-world development:

Navigation.propTypes = {
  config: PropTypes.array.isRequired
};

Or more precisely specifying array element types:

Navigation.propTypes = {
  config: PropTypes.arrayOf(
    PropTypes.string
  ).isRequired
};

PropTypes provide runtime type checking in development mode, helping catch errors such as passing strings instead of arrays, significantly improving code robustness.

Performance and Best Practices

When passing arrays as props, consider the following performance aspects:

1. Avoid inline array literals: {['!!!']} creates a new array object on each render, potentially causing unnecessary re-renders. If array content is constant, extract it as a constant.
2. Use key attributes: When rendering lists of array elements, provide stable key values for each element to help React update the DOM efficiently.
3. Consider default props: As shown in the original code, provide sensible default values for array props via getDefaultProps or defaultProps.

The following example demonstrates optimized code structure:

const DEFAULT_CONFIG = ['default'];

class Navigation extends React.Component {
  static defaultProps = {
    config: DEFAULT_CONFIG
  };
  
  static propTypes = {
    config: PropTypes.arrayOf(PropTypes.string)
  };
  
  render() {
    return (
      <div>
        {this.props.config.map((item, index) => (
          <span key={index}>{item}</span>
        ))}
      </div>
    );
  }
}

// Use constants instead of inline literals
const appConfig = ['app', 'config'];
ReactDOM.render(<Navigation config={appConfig} />, container);

Conclusion

When passing arrays as props in React, curly braces {} serve as the crucial bridge connecting JSX markup with JavaScript expressions. They explicitly instruct the JSX parser: "Please evaluate the content within curly braces as JavaScript expressions." For array literals, curly braces are mandatory because square brackets have special meaning in JSX attribute syntax. In contrast, string literals can omit curly braces, a syntactic convenience provided by JSX.

Deep understanding of this mechanism, combined with PropTypes type validation and performance optimization practices, enables developers to write more robust and efficient React components. Remember the core principle: content within curly braces is JavaScript expression evaluation, while content outside is JSX markup structure. This clear demarcation forms an essential foundation of React's declarative programming model.