How to traverse array of object in reactUI !!!

Topics to complete

1. What is array of object
2. How to traverse array of object
3. How to pass value in DOM.
4. How to pass values from one component to another(props/destructuring)

What is array of object?

In simplest way to put arrays and objects are way of storing data as a list which later be traversed.

An array can we represented as -- ['string1', 'string2', 1, 5, true]

An object can we represented as -- {height: 10, width: 10, structure: 'box'}

Basic difference in an object and array is that arrays have index while object have "key/value" pair. But in the end arrays are also objects under the hood.

We can use the properties of both in each other simultaneously.
Arrays in object -> {banana: [yellow, sweet], apple: [red, sweet]}

Objects in array(this is also called array of objects)
-> [{key1: value, key2: value}, {key1: value, key2: value}]

How to traverse array of object?

Please check this link to traverse through array with different options Traverse methods

How to pass value in DOM

Basically I'm trying to explain here how to pass value of objects to html through javascript/jsx.
We are gonna use map to loop through the objects and pass the value to html using jsx.

Checkout below code --

##MovieList.js  component
const movies = [
    {
        id: 1,
        name: 'Jurrasic Park',
        releaseDate: '12-10-2005',
        imbdRating: 4.8,
    },
    {

        id: 2,
        name: 'Avengers',
        releaseDate: '12-10-2009',
        imbdRating: 4.9,
    }
]

function movielist(){
return(
<div>
<ul>
{movies.map(movie) =>(
<li key={movie.id)> //we have to pass the id so 
that js will know which element 
it should render else it will throw an error.
<h3>{movie.name}</h3>
<p>{movie.releaseDate}</p>
)
}

// In the above code we are traversing list of object using map to html <li> tag.

How to pass values from one component to

another(props/destructuring)

I suppose you know the basics of react and how react works. Basically in react a monolithic structure breaks into components.
In these components we pass props (properites / arguments) of states (variable) to render things.

Check out the code below

## Suppose I've a component that 
we defined above but I want to pass
 those <li> values to the other js
 file(component) which will render
 the information on user screen in
 more beautiful way design by css.
 So How we do that.

Step 1

##MovieList.js  component
const movies = [
    {
        id: 1,
        name: 'Jurrasic Park',
        releaseDate: '12-10-2005',
        imbdRating: 4.8,
    },
    {

        id: 2,
        name: 'Avengers',
        releaseDate: '12-10-2009',
        imbdRating: 4.9,
    }
]

function movielist(){
return(
<div>
<ul>
{movies.map(movie) =>(
<li key={movie.id)>
<h3>{movie.name}</h3>
<p>{movie.releaseDate}</p>
)
}

Step 2

// I have a MovieListUI component in 
which <li> values gonna be pass. And it designed using material UI.

import React from 'react'
import { Paper } from '@material-ui/core'
export default function MovielistUI({ movie }) {
    return (
        <Paper>
         hELLO
        </Paper>

    )
}

Now we are gonna pass props or
 we can destructure the values
 for passing arguments

Step 3

1. By Passing Props
const movies = [
    {
        id: 1,
        name: 'Jurrasic Park',
        releaseDate: '12-10-2005',
        imbdRating: 4.8,
    },
    {

        id: 2,
        name: 'Avengers',
        releaseDate: '12-10-2009',
        imbdRating: 4.9,
    }
]

function movielist(){
return(
<div>
<ul>
{movies.map(movie) =>(
<MovieListUI key={movie.id} movie={movie}/> 
//here we are passing props  to 
pass the whole value of movies 
object to MovieListUI component
 //Not need to mention as we remove the whole
 list list which has the values
)
}


......

import React from 'react'
import { Paper } from '@material-ui/core'
export default function MovielistUI(props) {
    return (
        <Paper>
            <li key={props.movie.id}>
                <h3>{props.movie.name}</h3>
                <p>{props.movie.releaseDate}</p>
                <p>{props.movie.imbdRating}
                </p>
            </li>
        </Paper>

    )
}


2. By destructuring method

const movies = [
    {
        id: 1,
        name: 'Jurrasic Park',
        releaseDate: '12-10-2005',
        imbdRating: 4.8,
    },
    {

        id: 2,
        name: 'Avengers',
        releaseDate: '12-10-2009',
        imbdRating: 4.9,
    }
]

function movielist(){
return(
<div>
<ul>
{movies.map(movie) =>(
<MovieListUI key={movie.id} movie={movie}/> 
//here we are passing destructured property
 to pass the whole value of movies object 
to MovieListUI component
 //Not need to mention as we remove
 the whole list list which has the values
)
}


......

import React from 'react'
import { Paper } from '@material-ui/core'
export default function MovielistUI({movie}) {
    return (
        <Paper>
            <li key={movie.id}>
                <h3>{movie.name}</h3>
                <p>{movie.releaseDate}</p>
                <p>{movie.imbdRating}
                </p>
            </li>
        </Paper>

    )
}


//As you can see there's not much difference 
between props and destructuring. 
Props are used when you have so many arguments 
to pass or you want to like it that way. 
Same goes for destructuring.