New to TypeScript and Next.js. Trying to use an object key from a JSON file dynamically

[wicked coral]

Code snippets Gist in comments. The JSON file is where the data is being pulled from and into the tsx file.

As you can see, the currentFolder value is using state and is currently holding a value of "experience" as that's the first item in the info object in "developerConfig.about.sections.professional-info.info". This value is printing to the console just fine and is displaying in the first H1 just fine too. However, when i try to use it dynamically in the second H1 when calling the description value in "developerConfig.about.sections["professional-info"].info["experience"].title" it all falls apart.

The error message is as follows:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ experience: { title: string; description: string; }; "hard-skills": { title: string; description: string; }; "soft-skills": { title: string; description: string; }; }'.
  No index signature with a parameter of type 'string' was found on type '{ experience: { title: string; description: string; }; "hard-skills": { title: string; description: string; }; "soft-skills": { title: string; description: string; }; }'.

As a TypeScript and Next.js newbie I don't know if this is a TypeScript issue or a Next.js issue. AI has been no help, I've tried their suggestions of adding interfaces and declaring types but since im new, i dont know if im doing it wrong.

Where am i going wrong here?

Gist here, contains the JSON and tsx files: https://gist.github.com/YusafS94/509a9e2f7a3a0cf4408c0b5ed79bd1ff

My aim here is to have the value as state so i can change it's state based on button clicks. For example a button that says "soft-skills" will change the state of currentFolder to "soft-skills", leading that object's content to be displayed instead of "experience"

[naive sundial]

!:unsafe-keys

[fresh raptor]

retsam19#0

`!retsam19:unsafe-keys`:

Since TS allows objects to have extra properties not specified in the type, it doesn't assume that all the keys on the type are the only keys on the object. This means that Object.keys returns string[] not a specific type, and for(const key in obj), key is string, (not keyof typeof obj).

If you wish to assume otherwise, this utility is often helpful:

// A signature for `Object.keys` that assumes the only keys are the ones indicated by the type
const unsafeKeys = Object.keys as <T>(obj: T) => Array<keyof T>;

[naive sundial]

the problem is how you are doing Object.keys there, then later using the value as an index

here's a simpler/more-self-contained example:

[fresh raptor]

mkantor#0

Playground Link

Preview:```ts
import React, {useState} from "react"

const info = {
experience: {
title: "experience",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
},
}

export default function ProfessionalContent() {
const
...```

You can choose specific lines to embed by selecting them before copying the link.

[naive sundial]

i might be able to give some suggestions if you can tell me more about what you are trying to do. the profContentFolders[0] looks like you're arbitrarily picking the first property, even though JSON object properties are not really ordered

should that always be 'experience' perhaps?

[wicked coral]

Yeah i guess using 'experience' would be better, your hint that im using a value as an index has opened my eyes. I only used index [0] because copilot suggested it and that's the value i wanted users to land on by default anyway. I will write my intentions for this code now in a separate message since discord doesnt allow paragraphs

[wicked coral]

So the developer.json object is being used in my portfolio, that's what im currently building. I have a top/horizonal navbar tab labelled "about-me", when users click on this i want them to see a vertical sidebar on the left which will be a subnav for about-me only. The nav items in that sidebar should be the values "professional-info", "personal-info" and "hobbies-info" as seen on the JSON file in the sections. Then when users click on one of those 3 sidebar items, they should be presented with another inner sidebar with the same thing being done here except the values are now "experience", "hard-skills" and "soft-skills" in the case of the "professional-info" section key. But i want "experience" to be the default selected value when employers click on "professional-info". Thats why i left the index value as 0. Upon clicking "experience" the user should then see the description text in "experience.description" that is pulled from the JSON file. As you can see, if i can figure out a way to make the "experience" object key dynamic, all i need to do is change that as state and then the displayed content should update if the state is changed to "soft-skills" for example. Displaying "soft-skills.description" and so on and so forth

[wicked coral]

As further context, this is the design I'm trying to create. This guy created it in Vue, but i want to create it in Next.js for my own portfolio. As you can see, when you click on about-me at the top, the nested folder structure i described is there (icons on far left are sections, which change the inner folders when clicked): https://developer-portfolio-v2.netlify.app/about-me

[naive sundial]

what's the reason you want to make it so dynamic? for a personal site like this you would be in complete control of the structure, and i think your life would be simpler if you hardcoded more things

the data probably doesn't even need to be a .json file. it could just be a normal typescript object, then the whole structure will be statically known and you'd get all the nice stuff that comes along with that (autocomplete, more specific error messages, etc)

(also btw you can have multiple paragraphs in a discord message. shift+enter will make newlines without sending the message:

tada!)

[wicked coral]

Learn
something
new
every
day! lol

[wicked coral]

I guess i wanted to do it as a challenge to myself? idk. Im currently trying to find a junior dev job and my thinking is that this may be something asked of me in the job and i want to know how to do it, as well as improve my TS skills. But i guess you are right i could just hardcode for now and then slowly make it dynamic once its finished and live? time is of the essence after all, i need it ready so i can start applying asap

[wicked coral]

Ahh interesting. Could you suggest a typescript object for me that i could use as a starter?

That sounds like a much better option than trying to wrestle with a JSON object tbh

[naive sundial]

just copy your JSON stuff into a .ts file and assign it to a variable

export const stuff = // the JSON object

[naive sundial]

if you do want to keep it being very generic/dynamic, my next suggestion would be to model the info as an array instead of an object. same goes for anything else you need to dynamically loop over

the title is already in the property values too, so an array would make it less redundant

[wicked coral]

@naive sundial thankyou, I'm going to try what you said

[wicked coral]

@naive sundial using a typescript object within the component file itself solved 2 birds with 1 stone, I can now define the type/interface in there too very easily. Thankyou so much. /resolved

/resolved

Idk how to mark it solved it's not working

[naive sundial]

!resolve

[fresh raptor]

@wicked coral
Because your issue seemed to be resolved, this post was marked as resolved by @naive sundial.
If your issue is not resolved, you can reopen this post by running !reopen.
If you have a different question, make a new post in #1057653400046674112.

[naive sundial]

You can see all the commands with:

!help

[fresh raptor]

TypeScript Community

Bot Usage

Hello mkantor! Here is a list of all commands in me! To get detailed description on any specific command, do help <command>

**Help System Commands:**

helper ► Ping the @Helper role from a help post
resolved ► Mark a post as resolved
reopen ► Reopen a resolved post

**Misc Commands:**

ping ► See if the bot is alive
playground ► Shorten a TypeScript playground link
help ► Sends what you're looking at right now
handbook ► Search the TypeScript Handbook

**Reputation Commands:**

rep ► Give a different user some reputation points
history ► View a user's reputation history
leaderboard ► See who has the most reputation

**Snippet Commands:**

listSnippets ► List snippets matching an optional filter
snip ► Create or edit a snippet
deleteSnip ► Delete a snippet you own

**Twoslash Commands:**

twoslash ► Run twoslash on the latest codeblock, optionally returning the quick infos of specified symbols. You can use [email protected] or ts@next to run a specific version.

TypeScript · Jan 4, 2025, 2:47 AM

[wicked coral]

Thankyou

[wicked coral]

Do you mind if I DM you?

[naive sundial]

To what end? I prefer to talk publicly unless there's a specific privacy concern

Also FYI I'm going to a friend's wedding today so will be only intermittently available on discord (if at all)

[wicked coral]

Just if I have any further TS questions as I continue on the project. But no problem if not, that's fine 😀 enjoy the wedding

[naive sundial]

You can just open help threads here as needed. That way no one helper is a bottleneck, and other people can learn from the discussion