Passing Array as Props in React JS

Passing arrays as props in React JS is a common requirement when you’re dealing with dynamic data or passing multiple values between components. Understanding how to effectively pass arrays as props ensures your React application remains scalable and manageable.

Explaining Passing Array as Props in React JS:

Passing arrays as props in React JS is a crucial aspect of building dynamic and interactive user interfaces. By doing so, you can efficiently share data between different components, facilitating a more organized and modular codebase.

Step 1: Understanding Props in React

Props (short for properties) are a way to pass data from parent to child components in React. They are immutable and serve as a means of communication between components.

// Example of passing array as props in React
<ParentComponent data={dataArray} />

In the above example, dataArray is passed from the parent component to the child component as props.

Step 2: Declaring and Passing Array Props

To pass an array as props in React, you simply declare the array in the parent component and pass it down to the child component as a prop.

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const dataArray = [1, 2, 3, 4, 5];

  return (
    <div>
      <ChildComponent data={dataArray} />
    </div>
  );
}

export default ParentComponent;

Step 3: Accessing Array Props in Child Component

In the child component, you can access the array props passed from the parent component and manipulate them as needed.

// ChildComponent.js
import React from 'react';

function ChildComponent(props) {
  const { data } = props;

  // Accessing and using the array data
  return (
    <div>
      {data.map(item => (
        <p key={item}>{item}</p>
      ))}
    </div>
  );
}

export default ChildComponent;

Step 4: Handling Array Props in Child Component

Once you receive the array props in the child component, you can handle them using various methods such as mapping through the array to render elements dynamically or performing operations on the array elements.

Complete React JS Example Code:

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const dataArray = [1, 2, 3, 4, 5];

  return (
    <div>
      <ChildComponent data={dataArray} />
    </div>
  );
}

export default ParentComponent;

// ChildComponent.js
import React from 'react';

function ChildComponent(props) {
  const { data } = props;

  // Accessing and using the array data
  return (
    <div>
      {data.map(item => (
        <p key={item}>{item}</p>
      ))}
    </div>
  );
}

export default ChildComponent;

Explanation of the Example:

In this example, ParentComponent passes an array named dataArray to ChildComponent as props. The child component then maps through the array to render each item as a paragraph element. This demonstrates how to effectively pass and utilize array props in React JS components.