The aim of this exercise is to practice and understand the concept of props
.
You are free to solve this exercise by any approach - either class-based
or functional-based
.
-
Clone this repository.
-
On your terminal go inside
exercise-lab-props-boilerplate
directory and use the following command:npm install
.This command install's all the packages to your system that this project is using. Here is a link to get a better understanding of what and how exactly the above command works.
- Once everything is ready, you can type
npm run dev
-> inorder to run the application. You should be able to see a server running and see the output as shown below:
- Notice one thing - the data is already given to you inside ->
images
folder. Insidecomponents/Data.jsx
component, you can see that the image stored inimages
folder is being imported to this component. You can use thisData.jsx
component for fetching images.
Your task is to complete the code for Image.jsx
component. ( You can complete this by using any method - class-way or functional-way )
Now, if you notice your App.jsx
component, you will observe that <Image data={Data}></Image>
is being rendered at last. So, this is the point, where all the data is being passed as a prop to your Image.jsx
component.
Your task is handle this data, and return all the images.
your final output should look something like this: