Display Icons / Images from JSON File in React JS | React JSON Tutorial

welcome to webstylepress how to display images  from json file in react js how to use icons   from json file in react.js this is a question  asked by our subscriber i think i have published   a similar technique but in this video we  will expand on that and go deep in this topic   we can create a javascript file define an  object in it require images import that file   and use images from that this is straightforward  in this video we will use images in json file and   display those images in react.js to  do that we have to create json file   i have json file inside src folder  this is app.js this is records.json records.json is inside src folder  where app.js file is located let's put data in it opening  and closing square brackets   inside this array we can store  objects with curly braces three objects each object can have  properties with key value pairs   for each object let's use an id image name  and image url id image name and image url   json file uses double quotes and also do not  use comma at the end of last property in object   this image is stored in folder images and  it can be called by using this name icon   similarly data for the second object and here is  the data for third object we have got three images   we stored images in directory named as images  i will explain its location in few minutes   for now this is our json object containing  ids images names and images urls   we do not need to export this json file  in case of javascript file we export   that but this is json file let's import  this json file in our react component import name this import records records.json here we named this import as  records now inside this return statement we take a div with class name inner then we use curly braces and  write our logic inside it records and and records   dot map we use javascript map method on json  object import javascript map method maps each item   in array to something else map takes a callback  function that can have three parameters value   index array we will need only value here map  will return a new array we can use a function   or arrow function as callback on each element in  array inside map let's call this element record arrow function as callback and then return statement inside return it div with class name box inside it we will have our image and then image name from this record image name was caption caption and image path is stored in icon so here record dot icon save and we have got our images  with caption icon one two three inspect we will need a unique key for each child here   this is individual child let's apply  unique key here key prop record dot id refresh and now the warning is gone and we have to use art for the image   so this is the way to use image from json file  our images are being displayed images are coming   from json file image paths are defined in  json file so where is this images directory   or where are these images located this is our  project inside public directory we've got images   directory and we've got our three images here this  is important if you want to display images from   json file keep these images in public directory  also notice for image tag we did not use require   require image may not work here where images are  defined in json file and are being loaded from   public directory so this is how you can easily  display images in react.js defined in json file   i have similar videos related to images and  react.js on my channel if you go to webstylepress   youtube channel and search for images react you  will find very important and interesting tutorials   related to using images in react.js in multiple  ways like 7 ways to use images in react.js   multiple images in one import in react.js easy  way to use images and react gears and require   image not working painless  images import in react.js   these are also interesting videos  so have a look at these as well   also if you are interested in react.js have  a look at this react.js playground playlist   okay i hope it helped like share subscribe  and i will see you in the next video

Channel: WebStylePress

Views: 48,336

Keywords: display icons from json file in react js, display images from json file in react js, icons from json in react js, images from json in react js, display icons from json file in react, display images from json file in react, display json data in react, json react, json in react, react json, react display records from json, temporary database for react, json data in react js, React json tutorial, how to add image in react js, json server react, Image in react js

Id: NWG1Ygt1k1k

Length: 8min 20sec (500 seconds)

Published: Fri Feb 25 2022