CODEWITHSUNDEEP
javascriptreactjsbabeljsjsx
mani_ninja
mani_ninja

Reputation: 123

React Custom component is not getting rendered as expected

I am expecting text : SMALL Medium, Big rendered on screen , but its not getting rendered


 function Box(prop){
        const ele = <div className={prop.cn}>

                    </div>

        return ele
      }

      const ele = <div className="container">
                       <Box cn='small'>SMALL</Box>
                       <Box cn='medium'>Medium</Box>
                       <Box cn='medium'>BIG</Box>
                  </div>

      ReactDOM.render(ele, document.getElementById('root'));

Babel is compiling this JSX to this the picture below, I don't know why children array is not getting populated in BOX function. plz help

enter image description here

Upvotes: 2

Views: 593

Answers (2)

it-xp
it-xp

Reputation: 77

You should use children prop for provide Box element content to the div element inside it:

function Box({cn, children}){
  const ele = <div className={cn}>
                 {children} 
              </div>
  return ele
}

Upvotes: 1

Alan Omar
Alan Omar

Reputation: 4217

use :

function Box(prop){
    const ele = <div className={prop.cn}>
                     {prop.children} 
                </div>

    return ele
  }

Upvotes: 1

Related Questions