I want to get JSX in an object (foundCategory) from another file categoriesDetails, by using the find funtion through checking the item.title. Below is my code

Here How I m retrieving and want to send data as props to a component (CategoryDetails).

import type { NextPage } from 'next';
import CategoryDetails from '../components/CategoryDetails.jsx'
import {categoryDetails} from '../utils/categoriesDetails'

const Home: NextPage = () => {

  let foundCategory = null;
  foundCategory = categoryDetails.find(function(item){
    return item.title === 'Bus Plugs'
  })
  console.log(foundCategory)
  
  return (
    <>
      <Header />
      {foundCategory ? <CategoryDetails
            oDetails={foundCategory.details}
            sTitle={foundCategory.title}
          /> : ''
      }
      <FooterBar/>
    </>
  )
}

export default Home

and Here is my categoriesDetails.js from which I m exporting categories data (Simplified)

export const categoryDetails = [
  {
    title: 'Bus Plugs',
    details: (
          <div>
              <ul> </ul>
              <img src={`${categoryImagesDir}bus-plugs-large.jpg`} />
          </div>
       )
  },
  {
    title: 'Fuse',
    details: (
          <div>
              <ul> </ul>
              <img src={`${categoryImagesDir}fuse-large.jpg`} />
          </div>
       )
  }

But when I console to check, I get the following result instead the actual JSX in foundCategory.details. which I want to use in child component (CategoryDetails).

{
  title: 'Bus Plugs',
  details: {
    '$$typeof': Symbol(react.element),
    type: 'div',
    key: null,
    ref: null,
    props: { children: [Array] },
    _owner: null,
    _store: {}
  }
}

Looking forward, thanks

CodePudding user response：

In your Home component, you have this code:

 foundCategory = categoryDetails.find(function(item){
   return item.title = 'Bus Plug'
 })

item.title = "Bus Plug" doesn't check for equality, it sets item.title to "Bus Plug". you have to change this line to this:

 return item.title === 'Bus Plug'

CodePudding user response：

Try rewriting item.details to a function:

details: () => (
  <div>
      <ul></ul>
      <img src={`${categoryImagesDir}fuse-large.jpg`} />
  </div>
)