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)