Right now I am making an app using the twitch api. There channels endpoint returns a data object. Since it's an object I can't map over it like normally I would if it was an array.

Thus why I am using Objects.keys(myObj) to turn the object into an array, however it's only an array of it's keys, and in order to get an array of the keys and values I have to do something like this

var myObj = {
  name: 'zack',
  age: 27,
  height: 511
};

var newArr = Object.keys(myObj);
console.log(newArr);

var mappedArr = newArr.map(function(i) {
  return [i, myObj[i]];
});

console.log(mappedArr);

the last console log is an array of my key:value pairs, but each key/value pair is in its own array.

I just want to take the object data, map through it, and pass certain parts of the objects data to a child component as props like this: https://gist.github.com/laere/eaf0fa4eb90b731f92e9

How can I achieve the same thing? Here is my code: https://gist.github.com/laere/ac142dedd253087ffda6

UPDATE I solved the issue. i realized I was being mentally retarded and not just calling the values within my component like this {myObj.name} or {myObj.whatevervalueithas}. I was overcomplicating it thinking I had to map over the data like my olther components. What a day.

I have stored React components in a map as an alternative to long if statements.

What I have:
A map object with keys being "stage1", "stage2", etc and values being the relevant components

But I get an error on the map part that is getting the component:

This expression is not callable.
Type 'Element' has no call signatures.ts(2349)

Type '{}' is not assignable to type 'string'.ts(2322)

'ComponentMap.get' cannot be used as a JSX component.
Its type '(key: string) => ((props: customProps) => Element) | undefined' is not a valid JSX element type.
Type '(key: string) => ((props: customProps) => Element) | undefined' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
Type '((props: customProps) => Element) | undefined' is not assignable to type 'ReactNode'.
Type '(props: customProps) => Element' is not assignable to type 'ReactNode'.ts(2786)

Sample example code:

const ComponentMap = new Map([ ["stage1", InitialStageComponent], 
                               ["stage2", SecondStageComponent] ]);

const inputArray = ["stage1", "stage2"];

interface customProps {
    level: string
}

function InitialStageComponent(props: customProps) {
  // some logic  
  // say thrs some prop passed down called level
  return (<>
        <h1>This is stage1 {props.level}</h1>
    </>);
}

function SecondStageComponent(props: customProps) {
  // some logic   
  // say thrs some prop passed down called level
  return (<><h2>This is stage2 {props.level}</h2></>);
}

export function Page() {
  return (<>
    {
      inputArray.map(stage => {
        // e.g stage is "stage1" and the component returned from the map would be
        //   InitialStageComponent
        return (<> <ComponentMap.get(stage) /> </>);
      })
    }
  </>)
}