Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Failing to map property values in React.js and Typescript

I’m quite new to React and Typescript. I do have an object that has property values as arrays.I can get the object’s value through the below logic.

  let cityObj =   {
              "Harare":[
                        {
                        "released_on":"2007-11-08T00:00:00",
                        "slug":"0985"
                       },
                       {
                        "released_on":"2007-11-08T00:00:00",
                        "slug":"2346"
                       }
                      ],
               "bulawayo":[
                        {
                      "released_on":"2007-11-08T00:00:00",
                      "slug":"9383"
                    }
                 ]
             }

  Object.keys(cityObj).forEach(el =>{
     console.log(cityObj[el]);
  })

The output is as follows;

array(3)
array(1)

This is what i’m seeking to do in them jsx react return function. By i’m only getting the city name e.g Harare and Bulawayo after using the code below.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

{Objects.keys(cityObj).map((city:any) =>
      <div> {city}  
         cityObj[city].map((el:any) =>  <span>- {el.slug}</span>)
      </div>
 )}

What I really want is something like this:

Harare
  -0985
  -2345
Bulawayo
  -9383

But in this case, I’m only getting city names and the city data is not showing.

>Solution :

seems you just forget to pass inside map to a react executable code block

{Objects.keys(cityObj).map((city:any) =>
      <div> {city}  
         {cityObj[city].map((el:any) =>  <span>- {el.slug}</span>)}
      </div>
 )}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading