How to pass an Array of objects from Redux store to component in React?

Question

I am working on a React project, In that I have an Array of objects in a store so someone please

Tell me how to pass an Array of objects from the Redux store to react component.

In my project I have App.js that is Parent for that Parent I have two Childs, one is Childone

Component another one is Childtwo Component.

Now I am trying to pass an Array of Objects from Redux store to Childtwo Component

This is App.js

import React from 'react';
import './App.css';
import Childone from './Childone/Childone';
import Childtwo from './Childtwo/Childtwo';

function App() {
  return (
    <div className="App">
      <Childone></Childone>
      <Childtwo></Childtwo>
    </div>
  );
}

export default App;

This is Datatypes.js

export const studentsTypesVariable = 'STUDENTS'

This is Dataactions.js

import { studentsTypesVariable } from './Datatypes';

export const studentsActionsVariable = () => {
    return {
        type: studentsTypesVariable
    }
}

This is Datareducer.js

import { studentsTypesVariable } from './Datatypes';

const initialState = {
    data: [{}]
}


const arrayOfStudents = (state = initialState, action) => {
    switch (action.type) {
        case studentsTypesVariable: return {
            ...state,
            data: state.data === 0 ? [{
                name: 'Tesla',
                age: 21
            },
            {
                name: "William",
                age: 24
            }] : state.data
        }
        default: return state
    }
}

export default arrayOfStudents

This is store.js

import { createStore } from 'redux';
import  mainReducer  from './Data/Datareducer';


const store = createStore(mainReducer);

export default store

This is Chiltwo.js

import React from 'react';
import './Childtwo.css';

import { connect } from 'react-redux';


import { studentsActionsVariable } from '../Redux/Data/Dataactions';

const Childtwo = (props) => {
    return (
        <div className='bg-success'><h1>Two</h1>{props.Fun}</div>
    )
}

const mapStateToProps = state => {
    return {
        data: state.data
    }
}

const mapDispatchToProps = dispatch => {
    return {
        Fun: () => dispatch(studentsActionsVariable())
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Childtwo)

Answer 1

props.data is an array so you must iterate through the array in order to render the items in it:

// Childtwo.js

<div className='bg-success'>
  <h1>Two</h1>
  {props.data.map(item => <p>{item.name}</p>)}
</div>

The above code will work, however if you open the browser console you will notice that React logs a warning:

Warning: Each child in a list should have a unique "key" prop.

In order for React to keep track of changes to an array each item in the array needs a unique identity. Usually this is achieved using an ID:

{props.data.map(item => <p key={item.id}>{item.name}</p>)}

However if a unique identifier isn't available you can use the position of the item in the array (its index), although this isn't recommended :

{props.data.map((item, index) => <p key={index}>{item.name}</p>)}

Attempting to render the array without iterating through it (ie: <p>{props.data}</p> ) throws the Objects are not valid as a React child error because in JavaScript arrays are objects:

typeof ["an", "array"] // returns "object"`