Topics to complete
- What is array of object
- How to traverse array of object
- How to pass value in DOM.
- 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.
Top comments (0)