How can I import my objects file in react

Question

I have an .js file where I have my books as bellow:

export const booksData = [
{
    id: "1",
    title: "1491",
    description: "A fantastic historical book",
    genre: 'Historical',
    image: "https://shop.radical-guide.com/wp-content/uploads/2020/06/1491-Front.jpg"
},

How can I import and display these books dynamically in my react application?

What exactly do you mean by "dynamically"? Do you expect the data in this .js file to change? If so, when and how does it change? If not, you can simply bundle it by importing it as above — Phil

EDev EDev · Accepted Answer · 2022-05-30T05:32:13

import { booksData } from "path/to/file.js"

You don't really need to pass it as a prop. Only if you are using a component, then yes, you should, eg:

<Component books={booksData} />

Then, in the Component function you pass it as a prop.

function Component(props){
    return (
     <>
         {
           props.books.map(book => {
            return(
           <h1>{book.title}</h1>
         )})}
    </>
)}

If not, you can directly import to the component that object(not recommended)

import { booksData } from "path/to/file.js"

And simply:

function Component(){

    return (
     <>
         {
           booksData.map(book => {
            return(
           <h1>{book.title}</h1>
         )})}
    </>
)}

How can I import my objects file in react

2 Answers