CODEWITHSUNDEEP
javascriptreactjsreact-props
user13180201
user13180201

Reputation: 37

Object is not getting rendered on screen

I have this code where I try to render an object's value, but it's not happening. However in the console I can see a key and its value. I could not figure out what could be the reason because I can see the values and keys.


export const MarketPlaceOptions = (props) => {

    return (

        <Wrapper hideMarginBottom={props.forCreditSuggestion}>
            {
              Object.keys(props && props.categories).forEach(function(key) {
                  return(
                <Tile onClick={() => props.onClickOptionTile(key)}>
                    <Image src={Wellness} height={'34px}'}  width={'36px'}/>
                    <h1>{props && props.categories[key]}</h1>
                    <Ptag   textAlign='center'>

                        {props && props.categories[key]}
                    </Ptag>
                </Tile>
                  )
            })

            }
        </Wrapper>
    )
}

const Wrapper = styled.div`
    display: flex;
    overflow-x: auto;
    -webkit-scrollbar { display: none;}
`;

export default MarketPlaceOptions;

Upvotes: 1

Views: 58

Answers (1)

Rob Brander
Rob Brander

Reputation: 3781

The problem is that you're running .forEach() instead of .map() on Object.keys(props && props.categories). ForEach will return undefined, thus rendering nothing, even when the callback function returns a value. Using map will return a new array of objects, based on the cumulative return values from the callback function.

As a side note, I would encourage you to move your logic for checking if props.categories exists, to the outside of the Object.keys().

{ props && props.categories && Object.keys(props.categories).map(
   ...
}

Upvotes: 1

Related Questions