converting an object to jsx

[grand blade]

i have an object of data that im iterating over to create some jsx but its currently not working as intended

let test2 = [];
  for (const [category, options] of Object.entries(categoryOptions)) {
    test2 += `${<div key={category} >
      <h2 className={styles.category_name}>{category}</h2>
      <hr />
      <div className={styles.category}>
        {options.map(resource => (
          <Sidebar_Checkbox key={resource} resource={resource} />
        ))}
      </div>
    </div>}`
  }

  let test = Object.values(categoryOptions).map(category => {
    console.log(category);
    <div key={category} >
      <h2 className={styles.category_name}>{category}</h2>
      <hr />
      <div className={styles.category}>
        {category.map(resource => (
          <Sidebar_Checkbox key={resource} resource={resource} />
        ))}
      </div>
    </div>
  }
  )
  console.log("Hello: " + test2)
  return (
    <div >
      {
        test
      }
    </div>
  )

the logic works but for the first one all that gets displayed on the website is "[object Object][object Object][object Object][object Object][object Object]" and the second one nothing gets displayed

[cinder parrot]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[regal ermine]

I think you didn't return it in here?

  let test = Object.values(categoryOptions).map(category => {
    console.log(category);
    return (
      <div key={category} >
        <h2 className={styles.category_name}>{category}</h2>
        <hr />
        <div className={styles.category}>
          {category.map(resource => (
            <Sidebar_Checkbox key={resource} resource={resource} />
          ))}
        </div>
      </div>
    )
  }

[grand blade]

ok that fixed the invis but now its skipping the category name. i think Object.values just returns the subarrays and not the keys as well

[regal ermine]

try this

let test = Object.entries(categoryOptions).map(([category, options]) => {
    console.log(category);
    return (
      <div key={category} >
        <h2 className={styles.category_name}>{category}</h2>
        <hr />
        <div className={styles.category}>
          {options.map(resource => (
            <Sidebar_Checkbox key={resource} resource={resource} />
          ))}
        </div>
      </div>
    )
  }

btw, I don't know how categoryOptions look like. I guess it is what you were trying to do 😆

[grand blade]

tyyyy that fixed it, part of the error was in how sidebar_checkbox was handling the resource variable

[regal ermine]

cool