Loop through objects

[wandanli]

https://medium.com/how-to-react/different-ways-to-loop-through-arrays-and-objects-in-react-39bcd870ccf

three ways to get the value of an object:

for (let key in images) {
     console.log(images[key]);
    }

for (let key of Object.keys(images)) {
    console.log(images[key]);
    }

  for (let [key, value] of Object.entries(images)) {
    console.log(value);
    }

[wandanli]

Loop an object In the return()

<div className="loop-container">
    {
        Object.entries(joblist).map(([key, value]) => (
            <div id={key}>
                Date: {key}
                {
                    value.map(el => <div key={el.id}> {el.created_time} </div> )
                }
            </div>
        ))
    }
</div>

https://stackoverflow.com/a/45607042

[wandanli]

use JSON.stringify can let all type of value be the string

<Wrapper>
        {Object.entries(growth).map(([key, value]) => {
          const regex = /[\{\}\[\]\"\"]/g;
          let growthValue = JSON.stringify(value)
            .replace(regex, "")
            .replace(/,/g, ", ");
          return (
            <StyledParagraph>
              <StyledKey>{key.split("_").join(" ")}: </StyledKey>
              <StyledValue>{growthValue}</StyledValue>
            </StyledParagraph>
          );
        })}